/* ============================================================
   Obsidian — design tokens
   ============================================================

   Light is the base declaration. Dark redefines VALUES ONLY,
   inside the single prefers-color-scheme block at the bottom.
   No token is ever defined solely inside a media query, so
   every token resolves no matter which theme is active.

   Colour follows 60-30-10:
     60%  surfaces the eye rests on
     30%  ink and structure
     10%  accent

   The 10% is enforced, not aspirational. --accent is allowed
   on exactly five things:
     1. text links
     2. the active nav item
     3. the primary button
     4. focus rings
     5. one statistic per section
   Not section labels. Not list bullets. Not card borders.
   Not icon chips.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ---- 60: surfaces ----------------------------------------
     Cool slate, tinted toward the obsidian the dark theme is
     built on rather than a neutral grey, so the two themes are
     the same site rather than two different ones.            */
  --bg: #f6f8fb;
  --surface: #ecf0f6;
  --surface-hi: #ffffff;

  /* ---- 30: ink and structure ------------------------------- */
  --ink: #0b0f19;
  --ink-2: #55637a;
  --rule: #dce3ed;

  /* ---- 10: accent ------------------------------------------
     --accent      carries text. Deep lime, 7.64:1 on --bg and
                   7.10:1 on --surface.
     --accent-fill is a FILL ONLY and never carries text.
                   Chartreuse reads as a marker highlight here.
     --on-accent-fill is what sits on top of --accent-fill,
                   15.39:1 against it.                        */
  --accent: #405709;
  --accent-fill: #c8f751;
  --on-accent-fill: #0b0f19;
  --focus: #405709;

  /* Selection follows the accent-fill / on-fill pairing */
  --select-bg: #c8f751;
  --select-ink: #0b0f19;

  /* ---- Shadows ---------------------------------------------
     Tinted obsidian, never pure black. Two layers: a tight
     contact shadow plus a wide ambient one.                  */
  --shadow-1: 0 1px 2px rgb(11 15 25 / 7%), 0 2px 8px rgb(11 15 25 / 6%);
  --shadow-2: 0 2px 4px rgb(11 15 25 / 8%), 0 14px 32px rgb(11 15 25 / 11%);

  /* ---- Type ------------------------------------------------ */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2: clamp(1.44rem, 1.31rem + 0.65vw, 1.85rem);
  --step-3: clamp(1.73rem, 1.50rem + 1.15vw, 2.44rem);
  --step-4: clamp(2.07rem, 1.70rem + 1.85vw, 3.22rem);
  --step-5: clamp(2.49rem, 1.90rem + 2.95vw, 4.25rem);

  --lh-tight: 1.06;
  --lh-snug: 1.25;
  --lh-body: 1.62;

  /* ---- Space (4px base) ------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* ---- Radii ----------------------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  /* ---- Layout ---------------------------------------------- */
  --wrap: 1140px;
  --measure: 64ch;
  --gutter: clamp(1rem, 5vw, 3rem);

  /* ---- Motion ---------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 120ms;
  --t-mid: 220ms;
  --t-slow: 420ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Deep obsidian with a blue cast, not a neutral charcoal.
       The surfaces step up in lightness rather than in opacity,
       so a card on a card never goes muddy. */
    --bg: #0b0f19;
    --surface: #121826;
    --surface-hi: #1a2233;

    --ink: #f2f5fa;
    --ink-2: #94a3b8;
    --rule: #1e293b;

    /* Chartreuse on obsidian measures 15.39:1 -- far past
       legible and well into glare, which is exactly why the
       five-use rule above matters more here than in light.
       The pairing is deliberate: a cool base under a warm acid
       accent is the tension the palette is for. An accent from
       the base's own family (a cyan, say) sits quietly next to
       it and reads like every other dark developer theme. */
    --accent: #c8f751;
    --accent-fill: #c8f751;
    --on-accent-fill: #0b0f19;
    --focus: #c8f751;

    --select-bg: #c8f751;
    --select-ink: #0b0f19;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 45%), 0 2px 8px rgb(0 0 0 / 35%);
    --shadow-2: 0 2px 4px rgb(0 0 0 / 45%), 0 14px 32px rgb(0 0 0 / 50%);
  }
}