/*
  Kinlight design tokens.

  THIS IS A PHYSICAL COPY of frontend/css/tokens.css, not a shared reference —
  a deliberate, disclosed exception, not an oversight. marketing/ is deployed
  as its own, separate Render static site with its own document root (see
  CLAUDE.md's "marketing/ is intentionally NOT part of the app.py request-
  pipeline diagram" note) and has no build step to import a file living under
  frontend/. A path like /css/tokens.css would 404 here in production, since
  this site's root only ever contains marketing/'s own files.

  If you change a token value, update BOTH copies (this file and
  frontend/css/tokens.css) — see docs/design-system.md for the full rules
  this file encodes: one meaning per accent (gold=AI, sage=teacher's
  content/positive, ember=needs attention), contrast findings, and every
  specific remapping decision.

  tests/test_color_contrast.py's own tokens-sync check enforces this two-file
  requirement automatically: it compares this file and frontend/css/tokens.css
  with comments stripped, requiring every actual CSS rule (every :root/
  media-query/data-theme block and every declaration inside it) to be
  byte-for-byte identical — only the surrounding comment TEXT (like this one,
  naming which file is the "real" one vs. its copy) is allowed to differ.
  If you edit ONE file's actual rules without the other, that check fails
  the next time it runs, naming the exact mismatch.

  Dark theme: two mechanisms, both supported —
    1. Automatic, following the device/browser's own prefers-color-scheme.
    2. An explicit override via <html data-theme="dark"|"light">, checked
       BEFORE the media query, for a future in-app settings toggle (no
       toggle UI exists yet — this file just makes the CSS ready for one).
  --hearthwood and --oatlight are deliberately treated as a matched
  inverse pair in both themes: anywhere a rule does
  `background: var(--hearthwood); color: var(--oatlight);` (or the
  reverse), the pairing stays correctly high-contrast in both themes
  automatically, since the two tokens always invert together. This is why
  the universal `button { background: var(--hearthwood); color: white; }`
  pattern across every app file was changed to
  `color: var(--oatlight)` as part of this rollout — a literal "white"
  would have gone invisible against a dark-mode hearthwood button in that
  now-inverted state, and this is what your `color: var(--oatlight)`
  buttons rely on.

  REVISED, second dark-theme pass — gold/sage/ember now have REAL dark-theme
  variants (see the dark-theme block below), superseding this file's own
  original "these stay constant" decision. That first version caused a real
  bug: a tinted box (e.g. --ember-bg) stayed light while its own text
  (--ember-text, if left constant) either stayed dark (illegible on
  unrelated dark surfaces) or was patched to a fixed dark value that read as
  a light card floating on a dark page, not a real dark-theme surface. Now
  BOTH halves of each `-bg`/`-text` (and `-border`) pair flip together —
  dark, desaturated tinted backgrounds paired with light, higher-luminance
  text — the same "flip together" contract --hearthwood/--oatlight already
  had, extended to gold/sage/ember.

  This uncovered a SECOND, more widespread pre-existing bug while fixing the
  first: --ember-text/--sage-text are also used standalone, as plain error/
  success text sitting on the ORDINARY page/card background (e.g.
  #loginError, #billingError, #newProfileError — dozens of sites), never
  inside a tinted box at all. Under the old "stays constant" design, these
  rendered at only ~2.6–2.9:1 contrast against a dark-mode page (see
  docs/design-system.md's contrast findings) — failing AA, and nobody had
  caught it because dark theme had never been screenshotted for these
  specific elements before this pass. Making --ember-text/--sage-text
  theme-dependent fixes BOTH bugs from one change: a dark page's surfaces
  (both the ordinary page/card background AND the new dark tinted-box
  backgrounds) are all dark, so the same light --ember-text/--sage-text
  value reads correctly against either.

  ONE ROLE HAD TO STAY CONSTANT, and needed its own new token to do so:
  --ember-text/--sage-text are ALSO used as a SOLID FILL for a few small,
  saturated UI chips (.dangerBtn, a .pill badge, the mic "recording" pulse),
  always paired with white/--on-accent text. Flipping --ember-text/
  --sage-text for THIS role would break that pairing (a light fill can't
  carry white text). --ember-solid/--sage-solid are new, deliberately
  constant tokens carrying exactly the value --ember-text/--sage-text used
  to have everywhere (before they became theme-dependent) — used ONLY by
  those specific solid-fill-with-on-accent-text call sites, never by a
  tinted-box background or its own text. --gold-text has no such fill usage
  anywhere in the codebase (checked directly), so it needed no equivalent
  --gold-solid token — it flips cleanly on its own.
*/

:root {
  /* Neutrals */
  --hearthwood: #2E2A22;
  --oatlight: #F1EFE5;
  --fog: #D8D3C6;
  --muted: #6B6659;
  --card-bg: #FFFFFF;
  --chat-card-bg: #F9F7F2; /* index.html's own floating chat-card layer — deliberately distinct from --card-bg, never merged into it */

  /* Gold — AI-generated content only. Never a non-AI UI element.
     --gold-bg/--gold-text are the tinted-box pair (see the dark-theme
     block below for their dark-mode values); bare --gold is the constant
     icon/border/link accent, unaffected by this pass. */
  --gold: #BD8A3D;
  --gold-text: #8A6224;
  --gold-bg: #FBF1D9;

  /* Sage — teacher's own published content, and positive/confirmed status.
     --sage-bg/--sage-text are the tinted-box pair (dark-mode values below);
     bare --sage is the constant icon/fill/border accent (fails AA as body
     text, never use it for text); --sage-solid is the constant SOLID-FILL
     value (see the file header comment) for a chip/button paired with
     --on-accent white text — never used for a tinted box or its own text. */
  --sage: #6B8564;
  --sage-solid: #4F6B4A;
  --sage-text: #4F6B4A;
  --sage-bg: #E4EBE0;
  --sage-lesson-bg: #EDF2EA;   /* new, distinct pairing: "this content is drawn from your teacher's published lesson" — tracks --sage-bg/--sage-text's own dark-mode values, see below */
  --sage-lesson-text: #4F6B4A;

  /* Ember — needs attention / destructive / error. Same three-role split as
     sage above: --ember-bg/--ember-text tinted-box pair (dark-mode values
     below), bare --ember reserved for future icon/border use (currently
     unused directly, kept for symmetry), --ember-solid the constant
     solid-fill value for a chip/button paired with --on-accent. */
  --ember: #9C4A3C;
  --ember-solid: #9C4A3C;
  --ember-text: #9C4A3C;
  --ember-bg: #F6E9DD;
  --ember-border: #E7C4B8;

  /* Text color for a saturated, CONSTANT solid-fill accent (--ember-solid/
     --sage-solid, or bare --gold's own border-only uses) — a plain white
     that never needs to flip, since the fills it sits on don't either. */
  --on-accent: #FFFFFF;

  /* index.html's own ".headerPillLink" text color — kept as its own token
     rather than merged into --muted, since its exact value was independently
     contrast-checked and documented (~6.10:1 against its own pill fill,
     ~6.81:1 against the plain card background) and merging it into --muted
     (a very close but not identical value) would make that specific,
     already-verified math stale without re-checking it. */
  --header-pill-text: #5c5648;

  /* Translucent overlay tints — hover states / shadows derived from --gold /
     --hearthwood at a few specific opacities, used repeatedly across the app.
     CSS custom properties can't be interpolated into rgba()'s alpha channel
     directly (short of `rgb(from var(...) ...)`, patchy support), so these
     are their own literal tokens rather than computed from --gold/--hearthwood
     at each call site. */
  --shadow-soft: rgba(46, 42, 34, 0.08);
  --gold-tint-08: rgba(189, 138, 61, 0.08);
  --gold-tint-10: rgba(189, 138, 61, 0.1);
  --gold-tint-12: rgba(189, 138, 61, 0.12);
  --gold-tint-22: rgba(189, 138, 61, 0.22);

  /* Hearthwood-based hover/interaction tints — REPLACE the equivalent
     --gold-tint-* values at every hover/focus/nav-link site this rollout's
     third pass moved off gold (see docs/design-system.md): gold is reserved
     for AI content, and a generic hover highlight isn't that. Unlike the
     gold tints, these MUST be theme-aware (overridden in the dark-theme
     blocks below) — they're derived from --hearthwood's own RGB, which
     itself flips between themes, so a tint of it has to flip too (a
     "dark tint" of a color that's gone light would be backwards). */
  --hearthwood-tint-08: rgba(46, 42, 34, 0.08);
  --hearthwood-tint-10: rgba(46, 42, 34, 0.1);
  --hearthwood-tint-12: rgba(46, 42, 34, 0.12);
  --hearthwood-tint-22: rgba(46, 42, 34, 0.22);

  /* Neutral black-based scrims (modal backdrops, subtle hover states, the
     mobile drawer's own shadow) — not brand-hued, so not derived from any
     other token above, but still real color literals needing a name for
     the color-lint script to accept. */
  --scrim-backdrop: rgba(0, 0, 0, 0.4);
  --scrim-hover: rgba(0, 0, 0, 0.06);
  --scrim-drawer-shadow: rgba(0, 0, 0, 0.15);

  /* dashboard.html's own hearthwood-based scrims/shadows (dismissable modal
     backdrop, non-dismissable wizard/consent-overlay backdrop, elevated
     panel shadow, hovered stat-tile shadow) — same reasoning as the
     scrim-*/gold-tint-* tokens above. */
  --overlay-backdrop-modal: rgba(46, 42, 34, 0.45);
  --overlay-backdrop-strong: rgba(46, 42, 34, 0.6);
  --shadow-elevated: rgba(46, 42, 34, 0.25);
  --shadow-hover: rgba(46, 42, 34, 0.12);

  /* Muted, desaturated class-color palette — for distinguishing CLASSES
     (a school's Period 3 vs. Period 4, a family's multiple kids' subjects,
     etc.) only. Never use one of these for a status/severity signal —
     that's what gold/sage/ember are for. */
  --class-color-1: #8695A6;
  --class-color-2: #A68C6D;
  --class-color-3: #7C9885;
  --class-color-4: #A67C96;
  --class-color-5: #8C8367;
  --class-color-6: #6D8AA6;
  --class-color-7: #A6836D;
  --class-color-8: #7C7C99;

  /* Typography */
  --font-serif: "Fraunces", serif;
  --font-sans: "Work Sans", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

/*
  Dark-theme overrides.

  Neutrals (hearthwood/oatlight/fog/muted/card-bg/chat-card-bg) invert, as
  before. gold-bg/gold-text, sage-bg/sage-text (+ sage-lesson-bg/-text),
  and ember-bg/ember-text/ember-border ALSO now have real dark-mode values —
  see the file header comment for why this superseded the original "stays
  constant" design, and for why --ember-solid/--sage-solid/bare --gold/
  --sage/--ember/--on-accent/the class-color palette are deliberately left
  OUT of this block and so stay byte-for-byte the same in both themes: they
  back small, saturated solid-fill chips (paired with --on-accent) or plain
  icon/border accents, never a tinted box, so flipping them would break
  those existing pairings for no benefit.

  Every value below is verified against tests/test_color_contrast.py's own
  automated pair-contrast check (see that file, and docs/design-system.md's
  "Dark theme" section for the exact ratios) — not eyeballed.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hearthwood: #F1EFE5;
    --oatlight: #1C1A15;
    --fog: #3A362C;
    --muted: #B0A99C;
    --card-bg: #24221C;
    --chat-card-bg: #211F1A;

    --gold-bg: #3A2E1A;
    --gold-text: #EAD39D;

    --sage-bg: #243024;
    --sage-text: #9CC291;
    --sage-lesson-bg: #243024;
    --sage-lesson-text: #9CC291;

    --ember-bg: #3A211D;
    --ember-text: #E8A99A;
    --ember-border: #B07A6C;

    --hearthwood-tint-08: rgba(241, 239, 229, 0.08);
    --hearthwood-tint-10: rgba(241, 239, 229, 0.1);
    --hearthwood-tint-12: rgba(241, 239, 229, 0.12);
    --hearthwood-tint-22: rgba(241, 239, 229, 0.22);
  }
}

:root[data-theme="dark"] {
  --hearthwood: #F1EFE5;
  --oatlight: #1C1A15;
  --fog: #3A362C;
  --muted: #B0A99C;
  --card-bg: #24221C;
  --chat-card-bg: #211F1A;

  --gold-bg: #3A2E1A;
  --gold-text: #EAD39D;

  --sage-bg: #243024;
  --sage-text: #9CC291;
  --sage-lesson-bg: #243024;
  --sage-lesson-text: #9CC291;

  --ember-bg: #3A211D;
  --ember-text: #E8A99A;
  --ember-border: #B07A6C;

  --hearthwood-tint-08: rgba(241, 239, 229, 0.08);
  --hearthwood-tint-10: rgba(241, 239, 229, 0.1);
  --hearthwood-tint-12: rgba(241, 239, 229, 0.12);
  --hearthwood-tint-22: rgba(241, 239, 229, 0.22);
}