/* Enten Systems — tokens.css
   Single, consolidated foundation file. Every CSS custom property
   the design system depends on lives here. Drop into a static site
   as the first stylesheet; component CSS reads from these vars.

   Light theme on :root. The dark theme is the block at the end of the
   file, repeated twice with identical contents (system dark with no stored
   choice, and an explicit data-theme="dark"). tests/theme-tokens.test.mjs
   keeps the two copies in sync. Spec: prompt-package/13_dark_mode_spec.md.

   This file is self-contained: it imports the @font-face declarations
   so a page only needs to <link> tokens.css + base.css to bootstrap.
*/

@import url('./fonts/fonts.css');

:root {
  /* ============================================================
     COLORS — Brand
     ============================================================ */
  --brand-green:        #3FA535; /* Primary accent. Buttons, links, the "active" green. Sampled from logo. */
  --brand-green-deep:   #1F6B2D; /* Headings on light backgrounds, hover states, overline color. */
  --brand-green-soft:   #E8F3E5; /* Tinted surfaces, callout backgrounds, ::selection bg. */
  --brand-brown:        #5A3A1F; /* Heritage accent — wordmark color. Use sparingly. */
  --brand-green-strong: #2B7F31; /* Button backgrounds, link text, card numbers, focus ring (white on it 5.02:1). */
  --brand-brown-light:  #C9A27A; /* Brown text on --surface-inverse. */
  --on-brand:           #FFFFFF; /* Text on --brand-green-strong and --brand-green-deep. */

  /* ============================================================
     COLORS — Neutrals (warm, not steel)
     ============================================================ */
  --ink-900:        #1A1F1B; /* Primary text, headlines. */
  --ink-700:        #3D453F; /* Body copy. */
  --ink-500:        #646D69; /* Secondary text, captions, micro-copy. */
  --ink-300:        #B8C0BC; /* Disabled text, muted glyphs. */
  --surface-0:      #FFFFFF; /* Page background. */
  --surface-50:     #F3F5EF; /* Alternating section bands, page heroes, footer. */
  --surface-100:    #F1F4EF; /* Cards, inputs, quiet panels. */
  --border-soft:    #DCE1D9; /* Hairlines, dividers. */
  --border-strong:  #B8C0BC; /* Form input borders, interactive borders. */
  --border-input:    #7F8A84; /* Form-field outlines (3:1 non-text). */
  --surface-inverse: #1A1F1B; /* Panels that stay dark in both themes. */
  --on-inverse:      #FFFFFF; /* Text on --surface-inverse. */

  /* ============================================================
     COLORS — State
     ============================================================ */
  --state-success: #2B7F31;
  --state-warning: #8F5E12;
  --state-danger:  #C13B2A;
  --state-info:    #2D6FB8;

  /* ============================================================
     COLORS — Data viz
     Sequential ramp = quantitative gradients (heatmaps, choropleths).
     Categorical = up to 4 distinct series.
     ============================================================ */
  --viz-seq-1: #E8F3E5;
  --viz-seq-2: #B8DCB0;
  --viz-seq-3: #7FBE74;
  --viz-seq-4: #3FA535;
  --viz-seq-5: #1F6B2D;
  --viz-cat-1: #3FA535; /* Brand green */
  --viz-cat-2: #2D6FB8; /* Info blue */
  --viz-cat-3: #D08F2C; /* Warm amber */
  --viz-cat-4: #5A3A1F; /* Heritage brown */
  /* Labels printed inside a chart fill. */
  --viz-seq-3-ink: #1A1F1B;
  --viz-seq-4-ink: #1A1F1B;
  --viz-seq-5-ink: #FFFFFF;
  --viz-cat-4-ink: #FFFFFF;

  /* ============================================================
     TYPE — Families
     ============================================================ */
  --font-sans-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-sans-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:         "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ============================================================
     TYPE — Scale (1.250 modular ratio, 16px base)
     Each token is a `font` shorthand: weight size/line-height family.
     Apply with: font: var(--font-h3);
     ============================================================ */
  --font-display-xl: 700 64px/68px var(--font-sans-display); /* Hero headlines */
  --font-display-l:  700 48px/56px var(--font-sans-display); /* Page heros */
  --font-display-m:  600 36px/44px var(--font-sans-display); /* Section H2 */
  --font-h3:         600 24px/32px var(--font-sans-display); /* Card titles, sub-section */
  --font-h4:         600 20px/28px var(--font-sans-display); /* Inline headings */
  --font-body-l:     400 18px/28px var(--font-sans-body);    /* Lead paragraphs */
  --font-body:       400 16px/26px var(--font-sans-body);    /* Default body */
  --font-body-s:     400 14px/22px var(--font-sans-body);    /* Captions, microcopy */
  --font-overline:   600 13px/16px var(--font-sans-display); /* Eyebrows (use uppercase + tracking) */
  --font-mono-s:     500 14px/22px var(--font-mono);         /* Code, kbd, data labels */

  /* TYPE — Tracking (apply alongside font shorthand) */
  --tracking-display:  -0.02em;
  --tracking-h3:       -0.01em;
  --tracking-overline:  0.08em;

  /* TYPE — Fluid sizes for the home page (prompt-package/15_home_redesign_spec.md).
     Max <= 2.5 x min, so the text still reaches 200 % zoom (WCAG 1.4.4). */
  --text-hero:       clamp(1.875rem, 1.08rem + 3.38vw, 4.25rem); /* 30 @360-375 · 31 @414 · 43 @768 · 52 @1024 · 61 @1280 · 66 @1440 · 68 from 1500 */
  --leading-hero:    1.06;     /* room for ă, ș, ț in a tight display face */
  --tracking-hero:   -0.028em;
  --text-lead-fluid: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);   /* 17 @375 · 18 @768 · 19.6 @1440 */
  --text-h2-fluid:   clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);       /* 28 @375 · 34 @768 · 40 from 1200 */

  /* ============================================================
     SPACING — 8pt grid
     ============================================================ */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-8:   48px;
  --space-10:  64px;
  --space-12:  96px;
  --space-16: 128px;
  --space-20: 160px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-sm:    6px;  /* Inputs, small chips */
  --radius-md:   12px;  /* Cards, buttons */
  --radius-lg:   20px;  /* Large surfaces, hero panels */
  --radius-pill: 999px; /* Tags, pill buttons */

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(26, 31, 27, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 31, 27, 0.08), 0 1px 3px rgba(26, 31, 27, 0.04);
  --shadow-lg: 0 16px 40px rgba(26, 31, 27, 0.10), 0 4px 12px rgba(26, 31, 27, 0.06);

  /* ============================================================
     THEME — non-colour values that change with the theme
     ============================================================ */
  color-scheme: light;
  --nav-bg: rgba(255, 255, 255, 0.92);   /* Translucent desktop nav. */
  --logo-filter: none;                   /* Dark: white reverse of the lockup (assets/README.md). */
  --theme-toggle-moon: inline-block;     /* The toggle shows the theme you would switch to. */
  --theme-toggle-sun: none;
  --photo-filter: none;      /* Dark: dims daylight photos (home hero). */
  --illus-filter: none;      /* Dark: white-ground line art turns light-on-dark (home platform layers). */
  --illus-blend:  multiply;  /* Dark: screen. The art's white paper takes the plate colour. */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --content-max: 1280px;
  --gutter:        24px;
  --hoop: clamp(1.75rem, 0.6rem + 5vw, 4.5rem);  /* Rise of the arch on the home hero photo's top edge: 28 @375 · 48 @768 · 72 @1440. 0 = flat. */

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur-med:  400ms;

  /* ============================================================
     BREAKPOINTS — used in @media queries throughout
     Note: CSS doesn't (yet) allow custom properties inside @media
     queries themselves. The tokens are documented here for ref;
     the @media rules use the literal pixel values.
     ============================================================ */
  --bp-sm:  640px;  /* phone landscape, small tablet portrait */
  --bp-md:  768px;  /* tablet portrait */
  --bp-lg: 1024px;  /* tablet landscape, small laptop */
  --bp-xl: 1280px;  /* desktop content width target */
}

/* ============================================================
   DARK THEME — the same block twice. Keep them identical.
   1) System dark, unless the visitor chose light.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand-green:        #5EC254;
    --brand-green-strong: #5EC254;
    --brand-green-deep:   #8BD781;
    --brand-green-soft:   #16301B;
    --brand-brown:        #C9A27A;
    --brand-brown-light:  #C9A27A;
    --on-brand:           #0E1310;
    --ink-900:            #ECF1ED;
    --ink-700:            #C5CEC8;
    --ink-500:            #98A39D;
    --ink-300:            #5F6B64;
    --surface-0:          #0E1310;
    --surface-50:         #161F1A;
    --surface-100:        #1A231E;
    --surface-inverse:    #1B3A22;
    --on-inverse:         #FFFFFF;
    --border-soft:        #26302A;
    --border-strong:      #3E4A43;
    --border-input:       #66736B;
    --state-success:      #6CCB62;
    --state-warning:      #E3A84B;
    --state-danger:       #F07462;
    --state-info:         #6FA8E8;
    --viz-seq-1:          #3E8F45;
    --viz-seq-2:          #5EC254;
    --viz-seq-3:          #8BD781;
    --viz-seq-4:          #B9E6B2;
    --viz-seq-5:          #DFF3DA;
    --viz-cat-1:          #5EC254;
    --viz-cat-2:          #6FA8E8;
    --viz-cat-3:          #E3A84B;
    --viz-cat-4:          #C9A27A;
    --viz-seq-3-ink:      #0E1310;
    --viz-seq-4-ink:      #0E1310;
    --viz-seq-5-ink:      #0E1310;
    --viz-cat-4-ink:      #0E1310;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
    --nav-bg: rgba(14, 19, 16, 0.92);
    --logo-filter: brightness(0) invert(1);
    --theme-toggle-moon: none;
    --theme-toggle-sun: inline-block;
    --photo-filter: brightness(0.86) saturate(0.92);
    --illus-filter: invert(1) hue-rotate(180deg);
    --illus-blend:  screen;
  }
}

/* 2) The visitor chose dark with the nav toggle. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-green:        #5EC254;
  --brand-green-strong: #5EC254;
  --brand-green-deep:   #8BD781;
  --brand-green-soft:   #16301B;
  --brand-brown:        #C9A27A;
  --brand-brown-light:  #C9A27A;
  --on-brand:           #0E1310;
  --ink-900:            #ECF1ED;
  --ink-700:            #C5CEC8;
  --ink-500:            #98A39D;
  --ink-300:            #5F6B64;
  --surface-0:          #0E1310;
  --surface-50:         #161F1A;
  --surface-100:        #1A231E;
  --surface-inverse:    #1B3A22;
  --on-inverse:         #FFFFFF;
  --border-soft:        #26302A;
  --border-strong:      #3E4A43;
  --border-input:       #66736B;
  --state-success:      #6CCB62;
  --state-warning:      #E3A84B;
  --state-danger:       #F07462;
  --state-info:         #6FA8E8;
  --viz-seq-1:          #3E8F45;
  --viz-seq-2:          #5EC254;
  --viz-seq-3:          #8BD781;
  --viz-seq-4:          #B9E6B2;
  --viz-seq-5:          #DFF3DA;
  --viz-cat-1:          #5EC254;
  --viz-cat-2:          #6FA8E8;
  --viz-cat-3:          #E3A84B;
  --viz-cat-4:          #C9A27A;
  --viz-seq-3-ink:      #0E1310;
  --viz-seq-4-ink:      #0E1310;
  --viz-seq-5-ink:      #0E1310;
  --viz-cat-4-ink:      #0E1310;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
  --nav-bg: rgba(14, 19, 16, 0.92);
  --logo-filter: brightness(0) invert(1);
  --theme-toggle-moon: none;
  --theme-toggle-sun: inline-block;
  --photo-filter: brightness(0.86) saturate(0.92);
  --illus-filter: invert(1) hue-rotate(180deg);
  --illus-blend:  screen;
}