/* Atelier's design tokens WITHOUT the Japanese font (docs/OPTIMIZATION.md
   Phase 2a). Everything below is exactly what tokens.css always declared;
   tokens.css now imports this file after the font, so every page that links
   tokens.css gets the same two things in the same order as before.

   It exists so a page that shows no Japanese — the sign-in page — can take the
   palette without the 306 KB of @font-face slices zen-maru-gothic.css carries.
   Link THIS only when the page truly has no Japanese text to render. */

/* Atelier's shared visual vocabulary.
   Feature styles should consume these values instead of introducing isolated
   colours, radii, or shadow systems. Keeping every theme here makes a palette
   change atomic and prevents page-specific files from drifting apart. */
:root {
  /* Type. Manrope is a variable font; its default instance is ExtraLight (200),
     so anything showing text must set an explicit weight — body does in base. */
  --font: "Manrope", "Zen Maru Gothic", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  /* The display VOICE (owner, 2026-10-13: "Zen Maru plus Manrope"): Zen Maru
     Gothic for titles and welcome moments, in both scripts, at 700 — the
     weight already self-hosted, so no new files. Everything you tap or scan
     stays Manrope (--font). Use it for a screen's one title, never for
     buttons, labels or tables (DESIGN.md "Typography"). */
  --font-display: "Zen Maru Gothic", "Manrope", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  /* Ayu Light is the DEFAULT palette, and it lives here in :root rather than in
     a body[data-theme] block for one concrete reason: app.js is a deferred
     script, so any theme that needs an attribute is painted only after the
     bundle boots. Whatever most people see must therefore be the attribute-less
     case, or every first load flashes. Sage — the previous default — is now an
     ordinary named theme below and keeps its exact values. */
  --paper: #fcfcfc;
  --surface: #f3f4f5;
  --raised: #ffffff;
  --ink: #5c6166;
  --muted: #6d6f74;
  --line: #d9d8d7;

  /* Section accents */
  --clay: #fa8d3e;
  --moss: #86b300;
  --ochre: #f2ae49;
  --slate: #399ee6;
  --plum: #a37acc;

  --ok: #86b300;
  --bad: #f07171;
  /* --bad-text is --bad's readable twin, and exists because a danger colour has
     two different jobs. As a FILL or BORDER it only has to be recognisably red;
     as TEXT it has to clear 4.5:1 against ALL THREE surfaces — it was solved
     against --surface alone when it was written, and five palettes turned out
     to be under on --paper or --raised, where the same label also appears. Splitting them lets Ayu Light and One Dark keep their
     canonical upstream reds on chips and outlines while their labels stay
     legible. Every theme block sets both, so a new theme cannot silently
     inherit another palette's red. Values are computed, not eyeballed. */
  --bad-text: #af5252;

  --on-accent: #1f2430; /* text on a --clay / --moss fill */
  /* --accent-fill is the background for a control that CARRIES --on-accent
     text; --clay itself stays the border/tint/text accent.
     They differ because Sage's clay (#B06A4A) is a mid-tone: white on it is
     4.19:1, under AA for body text, and black is worse (3.5:1). Darkening only
     the FILL gets 5.4:1 without touching the palette's identity anywhere else.
     Every other theme's clay is already either dark enough for white or pastel
     enough for a dark on-accent, so they inherit --clay unchanged. */
  --accent-fill: var(--clay);

  /* Two more FILLS and one EDGE, for the same reason --accent-fill and
     --bad-text exist: a colour that has to be READ against something is a
     different value from the same colour used as decoration, and which palette
     needs the split is arithmetic rather than taste.
     web/tests/theme-contrast.test.mjs computes every pair below in every theme,
     so a new palette cannot land without answering for them.

     --accent-edge  the accent on a SELECTED control's edge. WCAG 1.4.11 asks
                    3:1 of anything that identifies a component's state, and Ayu
                    Light's clay is 2.13:1 against its own surfaces — pretty,
                    and invisible as a state. Deepened HERE only; the clay a
                    heading, a tint or a hover border uses is untouched.
     --ok-fill      a green fill carrying --on-accent text (Confirm, Add).
     --warn-fill    an amber one (the "soon" badge on a roster board).
     --bad-fill     a red one (a destructive dialog's confirm button). It is to
                    --bad what --bad-text already is: the same red answering a
                    different question.

     Each theme restates all three, because a custom property is substituted
     against the element it is DECLARED on: --ok-fill: var(--moss) written here
     resolves the ROOT's moss and would hand every theme Ayu Light's green.
     That is the same trap --accent-fill already works around. */
  --accent-edge: #e76406;
  --ok-fill: var(--moss);
  --warn-fill: var(--ochre);
  --bad-fill: var(--bad);

  --grid: rgba(57, 158, 230, 0.045); /* faint background-texture line colour */
  /* Interactive outlines, not decorative dividers: --muted already clears
     text contrast on all three surfaces. Repeat on body below so the var()
     resolves against the chosen body palette rather than root's Ayu Light. */
  --field-border: var(--muted);


  /* The edge fade for a horizontally-scrollable strip (.tab-scroll in
     style.css, wired by core/scrollhint.js).

     A MASK rather than a painted gradient, and that is the whole point: a
     painted fade has to end in the colour behind it, and this file defines nine
     palettes — plus the student page's device-light and device-dark. That is
     eleven values to keep in step, and every one of them wrong the moment a
     strip sits on a card rather than on the page. A mask makes the CONTENT
     transparent and paints nothing, so it cannot be wrong on any ground. It is
     the one fade that needs no colour, which is why it lives here as a shape
     rather than beside the palettes below.

     The falloff is EASED, not a single linear ramp: one linear stop reads as
     something slightly out of focus rather than as "there is more this way".

     ONLY THE WIDTH LIVES HERE. The gradients themselves are written into the
     .tab-scroll rules rather than pre-baked as tokens beside this, and that is
     forced rather than chosen: a custom property is substituted against the
     element it is DECLARED on, so a gradient declared here would resolve this
     34px and a strip asking for a narrower ramp would be silently ignored.
     Measured exactly that — a rail reading --scroll-fade: 24px whose mask
     computed 34px anyway. */
  --scroll-fade: 34px;

  /* Motion vocabulary (S1.5): two durations and one easing, consumed
     everywhere so the whole app accelerates identically. base.css zeroes
     both durations under prefers-reduced-motion, so consumers need no
     per-feature media queries — referencing the tokens IS the guard. */
  --motion-fast: 120ms;
  --motion-med: 200ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Shared chrome vocabulary for full-screen apps, blades, and cards. */
  --radius-control: 9px;
  --radius-card: 13px;
  --radius-window: 16px;
  --shadow-card: 0 7px 22px -16px rgba(32, 24, 16, 0.5);
  --shadow-window: 0 18px 46px -28px rgba(20, 14, 8, 0.62);
}

/* A theme only overrides palette variables; default (no data-theme) = Ayu Light. */
/* Sage — the original Atelier palette, and the default until Ayu Light took
   that slot. Unchanged values; it is simply named now. */
body[data-theme="sage"] {
  --paper:   #E9E2D2;
  --surface: #F3EEE2;
  --raised:  #FBF8F1;
  --ink:     #2C271F;
  --muted:   #6d6353;
  --line:    #D6CCB8;
  --clay:  #B06A4A;
  --moss:  #6E7A4F;
  --ochre: #C99A3F;
  --slate: #5C6B73;
  --plum:  #7A5A6B;
  --ok: var(--moss);
  --bad: #B0504A; --bad-text: #a24944;
  --on-accent: #fff;
  --accent-fill: color-mix(in srgb, var(--clay) 84%, #1a120c);
  /* Sage's ochre is a mid gold: white on it is 2.57:1. */
  --accent-edge: var(--clay); --ok-fill: var(--moss); --warn-fill: #94702a; --bad-fill: var(--bad);
  --grid: rgba(110, 100, 83, 0.05);
}

body[data-theme="tokyo-light"] {
  --accent-fill: var(--clay);
  --accent-edge: var(--clay); --ok-fill: var(--moss); --warn-fill: var(--ochre); --bad-fill: var(--bad);
  /* Tokyo Light's accents are all DARK (navy, forest, oxblood), so inheriting
     the root's near-black --on-accent painted every label onto a fill it could
     not be read against: 2.06:1 on clay, 1.66:1 on slate. White is 7.55:1. A
     theme that does not restate --on-accent is trusting another palette's
     answer to a question about its own colours. */
  --on-accent: #ffffff;
  --paper: #d5d6db; --surface: #e1e2e7; --raised: #eaebf0;
  --ink: #343b58; --muted: #575b78; --line: #c4c8da;
  --clay: #34548a; --moss: #385f0d; --ochre: #8f5e15; --slate: #0f4b6e; --plum: #5a3e8e;
  --ok: #385f0d; --bad: #8c4351; --bad-text: var(--bad);
  --grid: rgba(52, 84, 138, 0.05);
}
body[data-theme="tokyo-storm"] {
  --accent-fill: var(--clay);
  --accent-edge: var(--clay); --ok-fill: var(--moss); --warn-fill: var(--ochre); --bad-fill: var(--bad);
  --paper: #24283b; --surface: #292e42; --raised: #2f3549;
  --ink: #c0caf5; --muted: #949ebe; --line: #3b4261;
  --clay: #7aa2f7; --moss: #9ece6a; --ochre: #e0af68; --slate: #7dcfff; --plum: #bb9af7;
  --ok: #9ece6a; --bad: #f7768e; --bad-text: var(--bad);
  --on-accent: #1a1b26;
  --grid: rgba(122, 162, 247, 0.05);
}
body[data-theme="gruvbox"] {
  --accent-fill: var(--clay);
  /* Gruvbox's amber with white: 3.4:1 raw. */
  --accent-edge: var(--clay); --ok-fill: var(--moss); --warn-fill: #a26a12; --bad-fill: var(--bad);
  --on-accent: #ffffff;   /* same reason as Tokyo Light: dark accents, was 2.53:1 */
  --paper: #f2e5bc; --surface: #fbf1c7; --raised: #fcf7dd;
  --ink: #3c3836; --muted: #70645a; --line: #e6d5a3;
  --clay: #af3a03; --moss: #79740e; --ochre: #b57614; --slate: #076678; --plum: #8f3f71;
  --ok: #79740e; --bad: #cc241d; --bad-text: #c6231c;
  --grid: rgba(124, 111, 100, 0.07);
}
body[data-theme="onedark"] {
  --accent-fill: var(--clay);
  /* One Dark's red is 4.38:1 under its dark --on-accent — the one fill in the
     palette that had to be lifted rather than deepened. */
  --accent-edge: var(--clay); --ok-fill: var(--moss); --warn-fill: var(--ochre); --bad-fill: #e17179;
  --paper: #282c34; --surface: #2f343f; --raised: #353b45;
  --ink: #abb2bf; --muted: #a0a5af; --line: #3e4451;
  --clay: #d19a66; --moss: #98c379; --ochre: #e5c07b; --slate: #61afef; --plum: #c678dd;
  --ok: #98c379; --bad: #e06c75; --bad-text: #e78b92;
  --on-accent: #282c34;
  --grid: rgba(171, 178, 191, 0.045);
}
body[data-theme="night"] {
  --accent-fill: var(--clay);
  --accent-edge: var(--clay); --ok-fill: var(--moss); --warn-fill: var(--ochre); --bad-fill: var(--bad);
  --paper: #011627; --surface: #0e2438; --raised: #13304a;
  --ink: #d6deeb; --muted: #8899a6; --line: #1d3b53;
  --clay: #7fdbca; --moss: #addb67; --ochre: #ecc48d; --slate: #82aaff; --plum: #c792ea;
  --ok: #addb67; --bad: #ff5874; --bad-text: #ff5d78;
  --on-accent: #04222f;
  --grid: rgba(130, 170, 255, 0.06);
}

/* Ayu's three official schemes, adapted onto Atelier's semantic tokens.
   Palette source: https://github.com/ayu-theme/ayu-colors (MIT).  Keeping the
   raw colours here, rather than scattering them through feature CSS, means a
   card or modal remains the same component in Light, Mirage, and Dark. */
body[data-theme="ayu-light"] {
  --accent-fill: var(--clay);
  --accent-edge: #e76406; --ok-fill: var(--moss); --warn-fill: var(--ochre); --bad-fill: var(--bad);
  --paper: #fcfcfc; --surface: #f3f4f5; --raised: #ffffff;
  --ink: #5c6166; --muted: #6d6f74; --line: #d9d8d7;
  --clay: #fa8d3e; --moss: #86b300; --ochre: #f2ae49; --slate: #399ee6; --plum: #a37acc;
  --ok: #86b300; --bad: #f07171; --bad-text: #af5252;
  --on-accent: #1f2430;
  --grid: rgba(57, 158, 230, 0.045);
}
body[data-theme="ayu-mirage"] {
  --accent-fill: var(--clay);
  --accent-edge: var(--clay); --ok-fill: var(--moss); --warn-fill: var(--ochre); --bad-fill: var(--bad);
  --paper: #1f2430; --surface: #242936; --raised: #2a303d;
  --ink: #cccac2; --muted: #9198a7; --line: #343d4b;
  --clay: #ffad66; --moss: #d5ff80; --ochre: #ffd173; --slate: #73d0ff; --plum: #d4bfff;
  --ok: #d5ff80; --bad: #f28779; --bad-text: var(--bad);
  --on-accent: #1f2430;
  --grid: rgba(115, 208, 255, 0.055);
}
body[data-theme="ayu-dark"] {
  --accent-fill: var(--clay);
  --accent-edge: var(--clay); --ok-fill: var(--moss); --warn-fill: var(--ochre); --bad-fill: var(--bad);
  --paper: #0b0e14; --surface: #0f131a; --raised: #151a23;
  --ink: #bfbdb6; --muted: #7a848e; --line: #27303d;
  --clay: #ff8f40; --moss: #aad94c; --ochre: #ffb454; --slate: #59c2ff; --plum: #d2a6ff;
  --ok: #aad94c; --bad: #f07178; --bad-text: var(--bad);
  --on-accent: #0b0e14;
  --grid: rgba(89, 194, 255, 0.05);
}

/* Violet Hour — Jeffrey Hamilton's editor theme (github.com/JeffreyHamilton6399/
   violet-hour, MIT), ported onto Atelier's tokens. The theme is a CONTRAST
   BUDGET rather than a palette, which is what earns it a place: every value was
   solved against contrast rules, not picked by eye. The port holds the same
   line — each value below was checked against Atelier's own needs (ink/muted on
   the three surfaces, bad-text on --surface, on-accent on the clay and moss
   fills, every accent as text) before it was written, and both variants clear
   it; the dark one untouched. The accents read the theme's hue plan across:
   clay=identity lavender, moss=green, ochre=string amber, slate=property sky,
   plum=grammar rose (rose not the cursor magenta, so plum stays distinct from
   lavender on a tier board). Two light values are deliberate, not the file's
   first: the ground is the hover neutral, because the well is only 1.02:1 from
   the panel above it (no visible step); and moss is the regex green, because
   the git-added green is 3.6:1 as text — under budget. */
body[data-theme="violet-hour"] {
  --accent-fill: var(--clay);
  --accent-edge: var(--clay); --ok-fill: var(--moss); --warn-fill: var(--ochre); --bad-fill: var(--bad);
  --paper: #16111F; --surface: #261D32; --raised: #322740;
  --ink: #DCCFE7; --muted: #B2A2C3; --line: #513A6C;
  --clay: #B694EF; --moss: #60CD76; --ochre: #DEB052; --slate: #7DB5E1; --plum: #E582B1;
  --ok: #60CD76; --bad: #E25A68; --bad-text: #e56e7a;
  --on-accent: #16111F;
  --grid: rgba(182, 148, 239, 0.05);
}
body[data-theme="violet-hour-light"] {
  --accent-fill: var(--clay);
  --accent-edge: var(--clay); --ok-fill: var(--moss); --warn-fill: var(--ochre); --bad-fill: var(--bad);
  --paper: #E0D5ED; --surface: #EEE9F3; --raised: #F9F6FB;
  --ink: #3E2455; --muted: #634285; --line: #C5B2DB;
  --clay: #692BD4; --moss: #1B7238; --ochre: #955516; --slate: #215CA0; --plum: #B42567;
  --ok: #1B7238; --bad: #A01C25; --bad-text: #A01C25;
  --on-accent: #F9F6FB;
  --grid: rgba(105, 43, 212, 0.05);
}

body { --field-border: var(--muted); }