/* Just a DEV · design tokens: DEV-1 (direction C 「卡带 Cartridge」; contract: web/DESIGN.md; polish pass:
   artifacts/design/polish/README.md). A handheld console in warm plastic: ONE orange key per view, an olive LCD for live chain
   state, five cartridge colours for the five modes. Two editions from one set: Stone (default) and Graphite (mid-dark plastic,
   not black); <html data-theme> is set before paint by js/pre.js. An element with data-theme="graphite|stone" is an edition
   island. Light model: ONE key light from the top left. Top edges catch a highlight (--hi), bottom edges a shade (--lo),
   shadows fall down; gradients exist only as light on material (--sheen, --cap, LCD glass), never as colour. No glow. */
:root, [data-theme="stone"] {
  /* surfaces: plastic, not paper, not black */
  --bg: #E2E0DA;          /* shell */
  --stage: #E2E0DA;
  --panel: #ECEBE6;       /* raised plate */
  --panel-2: #F4F3EF;     /* recessed well: tables, lists, inputs */
  --panel-3: #D6D3CB;     /* switch tracks, neutral fills */
  --seg-on: #ECEBE6;      /* the raised segment of a switch */
  --hover: #FBFAF7;       /* row hover inside a well */
  --line: #E6E4DD;        /* hairline rows inside wells */
  --line-2: #CFCBC2;      /* dashed separators, strong hairlines */
  --edge: rgba(40, 36, 28, .12);
  --ghost: rgba(28, 28, 27, .07);
  --tint: rgba(255, 255, 255, .4);
  /* text (text-3 >= 4.5:1 on shell, plate and well; text-4 is decoration only) */
  --text: #1C1C1B; --text-2: #57554F; --text-3: #66635C; --text-4: #8B8880;
  /* the action. #FF5B1F is never text: --accent-text is orange as text */
  --key: #FF5B1F; --key-hi: #FF6A31; --key-d: #C9400F;
  --key-ink: #FFFFFF; --key-ink-s: #1C1C1B;
  --key-n: #ECEBE6; --key-n-ink: #1C1C1B; --key-n-sh: #B9B5AB;
  --key-dk: #3A3B39; --key-dk-ink: #F1EFEA; --key-dk-sh: #1F201E;
  --accent-text: #A8380C;
  /* LCD: the same olive glass in both editions */
  --lcd: #B5BC9F; --lcd-ink: #1D2418; --lcd-ink-2: rgba(29, 36, 24, .8); --lcd-ghost: .12; --bezel: #2F302D;
  --led-off: #D9D6CE; --bar: #E1DED7; --grille: #BDB9B0; --track: #CBC7BE;
  /* mode cartridges: only on cartridges / chips / mode labels, never on chrome */
  --m-barrel: #FF5B1F; --m-clock: #2F57E6; --m-boss: #9E2230; --m-thrones: #B6A6DD; --m-tug: #7BAA84; --m-platform: #3A3B39;
  --label: #F6F5F1; --label-ink: #1C1C1B; --label-ink-2: #57554F; --label-ink-3: #66635C;
  --tape: #1C1C1B; --tape-ink: #F1EFEA;
  /* direction (▲▼, candles, deltas only) */
  --up: #1E6B36; --down: #B3261F;
  --up-a14: rgba(30, 107, 54, .12); --down-a14: rgba(179, 38, 31, .12);
  --live: #E0322B; --ok: #2F8A49;

  /* light on material: highlight on top edges, shade on bottom edges, a 1 px rim where a plate meets the shell */
  --hi: rgba(255, 255, 255, .8);
  --lo: rgba(40, 36, 28, .07);
  --rim: rgba(40, 36, 28, .06);
  --sheen: rgba(255, 255, 255, .34);      /* the key light on the top of a plate (fades out over 96 px) */
  --cap: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%, rgba(40, 36, 28, .04)); /* a key cap is convex */
  --grain: url(/assets/dev1/tex/grain.png);   /* 96 px plastic grain, <= 7 % alpha, tiled on the shell and plates */
  /* shape, depth */
  --r-s: 5px; --r-m: 9px; --r-l: 14px; --r-plate: 22px; --r-face: 30px; --r-key: 12px;
  --raise-cast: 0 1px 1px rgba(40, 36, 28, .05), 0 3px 6px -2px rgba(40, 36, 28, .07), 0 16px 32px -18px rgba(40, 36, 28, .3);
  --raise-s-cast: 0 1px 1px rgba(40, 36, 28, .1), 0 2px 4px -2px rgba(40, 36, 28, .14);
  --recess: inset 0 1px 2px rgba(40, 36, 28, .1), inset 0 0 0 1px rgba(40, 36, 28, .045);
  --recess-d: inset 0 1px 3px rgba(40, 36, 28, .2), inset 0 0 0 1px rgba(40, 36, 28, .06);
  --lcd-in: inset 0 2px 6px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(0, 0, 0, .26), inset 0 -1px 0 rgba(255, 255, 255, .16);
  --pop-cast: 0 1px 1px rgba(40, 36, 28, .08), 0 8px 16px -8px rgba(40, 36, 28, .18), 0 32px 56px -24px rgba(40, 36, 28, .45);
  --scrim: rgba(28, 28, 27, .45);
  --travel: 3px;

  /* rhythm (4 px grid); --sec = between page sections, --sec-in = section head → its content */
  --gap: 16px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --sec: 120px; --sec-in: 28px; --pad: 24px;
  --t-key: 80ms; --t-fast: 120ms; --t-mid: 200ms; --t-rise: 350ms; --t-slow: 400ms; --t-slot: 700ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --header-h: 72px; --tab-h: 66px; --wrap: 1376px; --gutter: 40px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* type: 11 sizes, each with one role (DESIGN.md §3). 7-segment only for integers and timers */
  --fs-display: 104px; --fs-h1: 52px; --fs-h2: 36px; --fs-h3: 22px; --fs-title: 17px; --fs-lead: 17px;
  --fs-body: 15px; --fs-small: 13px; --fs-data: 14px; --fs-data-s: 12.5px; --fs-label: 11.5px;
  --fs-seg-xl: 74px; --fs-seg-l: 54px; --fs-seg-m: 40px; --fs-fig: 56px; --fs-fig-m: 30px;
  --fs-status: 13px; --fs-cap: 12px;

  --z-header: 50; --z-tab: 60; --z-overlay: 80; --z-toast: 90; --z-tip: 100;
  color-scheme: light;
}

/* Graphite edition: a darker plastic (#484742), clearly not near-black. Same orange, same LCD, same cartridges. */
:root[data-theme="graphite"], [data-theme="graphite"] {
  --bg: #484742; --stage: #484742;
  --panel: #53524D; --panel-2: #3F3E3A; --panel-3: #3F3E3A; --seg-on: #6A6963; --hover: #4B4A45;
  --line: #5A5953; --line-2: #6A6963; --edge: rgba(0, 0, 0, .28); --ghost: rgba(255, 255, 255, .07); --tint: rgba(255, 255, 255, .06);
  --text: #F2F0EB; --text-2: #DEDBD3; --text-3: #C9C6BE; --text-4: #8E8B84;
  --key-n: #55544F; --key-n-ink: #F2F0EB; --key-n-sh: #2A2926;
  --key-dk: #F2F0EB; --key-dk-ink: #1C1C1B; --key-dk-sh: #A9A69E;
  --accent-text: #FFB494;
  --led-off: #67665F; --bar: #5E5D57; --grille: #2E2D2A; --track: #3A3935;
  --m-platform: #F2F0EB;
  --up: #7FD99A; --down: #FFB3AA;
  --up-a14: rgba(127, 217, 154, .14); --down-a14: rgba(255, 179, 170, .14);
  --ok: #7FD99A;
  --hi: rgba(255, 255, 255, .1); --lo: rgba(0, 0, 0, .22); --rim: rgba(0, 0, 0, .2); --sheen: rgba(255, 255, 255, .04);
  --cap: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .1));
  --raise-cast: 0 1px 1px rgba(0, 0, 0, .25), 0 3px 6px -2px rgba(0, 0, 0, .25), 0 18px 34px -18px rgba(0, 0, 0, .7);
  --raise-s-cast: 0 1px 1px rgba(0, 0, 0, .35), 0 2px 4px -2px rgba(0, 0, 0, .4);
  --recess: inset 0 1px 3px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(0, 0, 0, .12);
  --recess-d: inset 0 1px 3px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .15);
  --pop-cast: 0 1px 1px rgba(0, 0, 0, .3), 0 8px 16px -8px rgba(0, 0, 0, .4), 0 32px 60px -22px rgba(0, 0, 0, .75);
  --scrim: rgba(20, 20, 18, .55);
  color-scheme: dark;
}

/* names built from other tokens: declared on every edition root so an island resolves them with its own values */
:root, [data-theme] {
  --key-a08: rgba(255, 91, 31, .08); --key-a32: rgba(255, 91, 31, .32);
  --raise: inset 0 1px 0 var(--hi), inset 0 -1px 0 var(--lo), 0 0 0 1px var(--rim), var(--raise-cast);
  --raise-s: inset 0 1px 0 var(--hi), 0 0 0 1px var(--rim), var(--raise-s-cast);
  --pop: inset 0 1px 0 var(--hi), 0 0 0 1px var(--rim), var(--pop-cast);
  /* a plate's material: the key light on its top 96 px, then grain on the plastic */
  --mat: linear-gradient(180deg, var(--sheen), transparent) top / 100% 96px no-repeat, var(--grain) var(--panel);
  /* LCD glass: a faint reflection from the top left + the pixel grid of the cells (text sits above both) */
  --lcd-tex: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 42%),
    repeating-linear-gradient(0deg, rgba(29, 36, 24, .04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(29, 36, 24, .04) 0 1px, transparent 1px 3px);
  --bezel-tex: linear-gradient(180deg, #393A36, #272825);
}

@media (max-width: 1365px) { :root { --gutter: 28px; } }
@media (max-width: 760px) {
  :root {
    --header-h: 60px; --gutter: 16px; --sec: 72px; --sec-in: 20px; --pad: 16px;
    --fs-display: 60px; --fs-h1: 34px; --fs-h2: 26px; --fs-h3: 19px; --fs-title: 16px; --fs-lead: 15.5px;
    --fs-seg-xl: 56px; --fs-seg-l: 38px; --fs-seg-m: 30px; --fs-fig: 36px; --fs-fig-m: 24px;
    --fs-data: 13.5px; --fs-label: 11px;
  }
}