/* ============================================================
   Helikona — Brand Tokens
   SINGLE SOURCE OF TRUTH for cross-project brand colours & type.
   Consumed by: helikona-website, helikona-book, video-production, …
   Change values HERE, bump the package version, then `npm update`
   in each project. Do not hand-copy these into other repos.
   ============================================================ */

:root {
  /* Green family — primary brand. Gravity (deep) → approachability (light).
     No --leaf-mid: considered and rejected (2026-08-01). --jungle-mid already
     covers mid-strength success/active green everywhere consumers need it
     (e.g. helikona-website's .copy-btn.is-copied, MDXEditor's dark-mode
     active-state remap) — a separate leaf-mid would just duplicate it. The
     one place --leaf-mid was referenced (helikona-client's billing status
     labels) was a typo, not a real gap; fix it there by switching to
     --jungle-mid, not by adding this token. */
  --deep-jungle:  #0B3D2E;
  --jungle-mid:   #1A6B47;
  --leaf-light:   #5DC48A;
  --leaf-pale:    #E8F2EC;

  /* Rust family — accent & emphasis. Use sparingly. */
  --iron-oxide:   #6B2A14;
  --rust-mid:     #B84C2A;
  --rust-light:   #D4896A;
  --rust-pale:    #F5EDE7;

  /* Amber family — warning / pending states. Light value darkened
     2026-08-02 (issue #14): #C97A00 failed WCAG AA on pale surfaces
     (3.35:1 on --surface, down to 2.93:1 on --leaf-pale). #9E5E00 is
     the first value clearing 4.5:1 on every light surface, so one
     token covers both text and graphic uses. Dark value unchanged —
     already 7.5–8.6:1 on dark surfaces. */
  --amber-mid:    #9E5E00;

  /* Stone family — neutrals with character (replace flat greys). */
  --temple-stone: #5A5C50;
  --stone-pale:   #EAEAE2;

  /* Surfaces */
  --off-white:    #F2F3EE;
  --dark:         #080D09;

  /* Text & borders */
  --text:         #181A16;
  --text-muted:   #4A4D44;
  --border:       #E2E4DA;

  /* Typography — DM Sans (display) · Inter (body/UI). Weights: 400/500/600/700. */
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radius — the three corner values every consuming repo had already
     hardcoded (rounded-[7px], rounded-[10px], rounded-full) rather than
     tokenised. Only these three: a full spacing/shadow scale is a bigger
     commitment nobody has asked for yet. */
  --radius-chip:  999px;
  --radius-card:  7px;
  --radius-field: 10px;
}

/* ── Semantic tokens ─────────────────────────────────────────────────
   Sit above the palette — only these flip in dark mode.
   --page-bg : overall page/body background
   --surface  : elevated surfaces — inputs, cards, panels
   --surface-hover  : the wash a pointer lays over a tappable surface
   --surface-active : the same wash at press strength
   --heading  : heading/title text
   --link     : inline link and accent text
   --leaf-strong : the leaf green at a strength that carries TEXT and glyphs
                   on the current surface
   --focus-ring  : keyboard focus indicator
   --press-fill / --press-text : the pair a filled green control swaps to
                   while it is being pressed                          */
:root {
  --page-bg: #F2F3EE;
  --surface:  #ffffff;
  --surface-hover:  rgba(26, 107, 71, 0.06);
  --surface-active: rgba(26, 107, 71, 0.18);
  --heading:    var(--deep-jungle);
  --link:       var(--jungle-mid);
  --action-bg:  var(--rust-pale);
  --action-text: var(--iron-oxide);

  /* --leaf-light is a mid-tone green drawn to sit ON --deep-jungle, and it
     does that well — but as a LABEL colour on a light ground it measures
     2.16:1, against the 4.5:1 that WCAG 1.4.3 asks of text. Anything that
     puts words or a glyph in brand green reaches for this instead, which is
     the darker jungle green in light mode and stays --leaf-light in dark,
     where the grounds invert and it is already 7.8:1. Added 2026-08-14
     after the design system page measured the failure. */
  --leaf-strong: var(--jungle-mid);

  /* An alias, so an app can retheme focus without disturbing button
     colour. Deliberately the same green: the ring sits OUTSIDE the control
     (2px offset), so it is read against the page, not against the fill. */
  --focus-ring: var(--leaf-strong);

  /* A press must change hue rather than lightness — a finger covers the
     control, so only a change of colour shows around the edge of it. Both
     halves flip, because the direction "darker green" lands on a different
     colour depending on which way the theme runs. */
  --press-fill: var(--jungle-mid);
  --press-text: var(--off-white);
}

/* ── Dark-mode overrides ─────────────────────────────────────────────
   Palette tokens (--deep-jungle, --leaf-light, --off-white, etc.)
   stay fixed — they're brand colours, not context-dependent.        */
@media (prefers-color-scheme: dark) {
  :root {
    /* Surfaces */
    --page-bg:    #101412;
    --surface:    #191e1a;

    /* Green washes, keyed to the bright brand green rather than the
       mid one — at 6% the light-mode value is invisible on a dark
       surface. Press is ~3× hover in both themes. */
    --surface-hover:  rgba(93, 196, 138, 0.07);
    --surface-active: rgba(93, 196, 138, 0.2);

    /* Text */
    --text:       #e2e5dc;
    --text-muted: #898d82;

    /* Heading & link — bright brand green, readable on dark bg */
    --heading:    #5DC48A;
    --link:       #5DC48A;

    /* Action — rust tint background, lighter rust text */
    --action-bg:   rgba(107, 42, 20, 0.28);
    --action-text: var(--rust-light);

    /* Borders & tinted backgrounds */
    --border:       #272b25;
    --stone-pale:   #1e221d;
    --leaf-pale:    #162419;
    --rust-pale:    #261912;

    /* Lighter for eyebrow labels and muted chrome */
    --temple-stone: #9ea29a;

    /* Brighter for focus rings & input borders */
    --jungle-mid:   #3dae6a;

    /* On a dark ground the bright leaf green IS the legible one — 7.8:1 on
       --surface — so --leaf-strong lands back on it. --focus-ring aliases
       --leaf-strong and so follows without being restated. */
    --leaf-strong:  var(--leaf-light);

    /* The press inverts here rather than merely darkening: dark mode's
       --jungle-mid (#3dae6a) is light enough that --off-white on it is
       2.52:1. Dropping the fill to --deep-jungle and lifting the label to
       --leaf-light is 5.65:1, and still reads unmistakably as "pressed". */
    --press-fill:   var(--deep-jungle);
    --press-text:   var(--leaf-light);

    /* Brighter amber for legibility against dark surfaces */
    --amber-mid:    #E0A64B;
  }
}