/* =============================================================================
   Lantern 幻灯 — one token schema, four systems.

   Every component in components.css paints with the names declared here and
   nothing else. A system is only a set of VALUES for those names, scoped to
   [data-system="…"] and [data-system="…"][data-mode="dark"], so the same
   markup can show all four side by side on one page.

   The schema keeps the editor's own names wherever one already exists
   (src/styles/system.css: --ink, --background, --card, --popover, --primary,
   the ink-alpha ladder, the washes, --radius, --control-h, --row-h,
   --text-row …) and adds what the new brand needs as NEW, named tokens:

     --lamp, --lamp-2, --lamp-ink, --lamp-glow  the light: what is lit now
     --seal                                      T1's vermilion seal for 幻燈
     --kf-*                                      the keyframe track ●—○—○
     --outline-*                                 the ink outline (L1, D3)
     --sticker-*, --edge                         the die-cut sticker (B3)
     --font-display*, --display-*, --cjk-widen   the display voices (D, T1)
     --pop-1 … --pop-4                           toy colours (B3, RR1)
     --space-1 … --space-8                       one spacing ladder

   The four systems, from the current app outwards:

     ink        墨与灯   fine-tune of today's hux.pro system
     keyframe   关键帧   balance: D's type, L1's track, T1's Song
     toybox     玩具盒   balance, cute: RR1 03 / 12, D3's soft plastic
     showtime   放映     all new: B3's stickers, CC3's night, dark-first
   ============================================================================= */

/* --- 1. STRUCTURE — shared by every system (system.css values) ----------- */

[data-system] {
  --text-title: 15px;
  --text-page-title: 28px;
  --text-row: 13px;
  --text-value: 12px;
  --text-caption: 11px;
  --weight-row: 400;
  --weight-heading: 600;
  --weight-caption: 500;
  --leading-row: 18px;

  --control-h: 28px;
  --control-inner-h: 24px;
  --control-pad-x: 10px;
  --control-font: 12px;
  --row-h: 32px;
  --switch-w: 30px;
  --switch-h: 18px;
  --slider-track: 4px;
  --slider-thumb: 14px;
  --control-lg-h: 40px;
  --control-lg-font: 14px;

  /* NEW: one spacing ladder (4-based), so gaps are names too. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* The display ladder, for brand moments only (never panel text). */
  --display-xs: 20px;
  --display-s: 28px;
  --display-m: 44px;
  --display-l: 64px;
  --display-xl: clamp(48px, 9vw, 120px);

  --duration-quick: 0.2s;
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --kf-step: 0.9s; /* NEW: one keyframe's dwell in an animated track */

  /* The user's deck: content, not chrome. Constant in every system and
     theme — the slide keeps its own colours (design principles §2). */
  --deck-paper: #fff7e8;
  --deck-ink: #26201a;
  --deck-sky-1: #ffd9a8;
  --deck-sky-2: #ff9d6c;
  --deck-sun: #fff2cf;
  --deck-hill-1: #3d4f63;
  --deck-hill-2: #22303f;
  --deck-alt-1: #c9e4de;
  --deck-alt-2: #6aa39a;
  --deck-alt-3: #f3c6c6;
  --deck-alt-4: #c94f4f;
  --deck-alt-5: #ddd6f3;
  --deck-alt-6: #6e5fb8;
}

/* Touch and phone: the whole panel scale one step up, in one place, as
   system.css does. `.lt-touch` lets a phone mock-up use it on a desktop. */
.lt-touch {
  --text-title: 17px;
  --text-page-title: 24px;
  --text-row: 15px;
  --text-value: 13px;
  --text-caption: 12px;
  --control-h: 44px;
  --control-inner-h: 40px;
  --control-font: 16px;
  --row-h: 44px;
  --switch-w: 40px;
  --switch-h: 24px;
  --slider-thumb: 22px;
  --control-lg-h: 48px;
  --control-lg-font: 16px;
}
@media (pointer: coarse), (max-width: 639.98px) {
  [data-system] {
    --text-title: 17px;
    --text-page-title: 24px;
    --text-row: 15px;
    --text-value: 13px;
    --text-caption: 12px;
    --control-h: 44px;
    --control-inner-h: 40px;
    --control-font: 16px;
    --row-h: 44px;
    --switch-w: 40px;
    --switch-h: 24px;
    --slider-thumb: 22px;
    --control-lg-h: 48px;
    --control-lg-font: 16px;
  }
}

/* --- 2. SYSTEMS — inputs only ------------------------------------------ */

/* ink · 墨与灯 · fine-tune.
   Today's system untouched (Inter, JetBrains Mono, Newsreader, glass, the
   alpha ladder, no accent in chrome) plus ONE new colour: the lamp, which
   only ever means "lit now" — the current keyframe, the playhead, 播放. */
[data-system='ink'] {
  --ink: oklch(0.145 0 0);
  --background: oklch(0.985 0.002 75);
  --card: oklch(1 0 0);
  --card-2: oklch(0.965 0.002 75);
  --popover: oklch(1 0 0);
  --stage: oklch(0.94 0.003 75);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.58 0.22 27);
  --lamp: oklch(0.69 0.19 46);
  --lamp-2: oklch(0.84 0.13 78);
  --lamp-ink: oklch(0.17 0.02 50);
  --seal: oklch(0.56 0.2 32);
  --select: color-mix(in oklab, var(--ink) 45%, transparent);
  --edge: oklch(1 0 0);
  --pop-1: var(--lamp-2);
  --pop-2: oklch(0.9 0.03 230);
  --pop-3: oklch(0.9 0.03 350);
  --pop-4: oklch(0.9 0.03 150);

  --ink-alpha-secondary: 54%;
  --ink-alpha-tertiary: 32%;
  --ink-alpha-quaternary: 20%;
  --wash-alpha-muted: 4%;
  --wash-alpha-accent: 7%;
  --wash-alpha-border: 9%;

  --font-ui:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei',
    sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, 'PingFang SC', monospace;
  --font-serif: 'Newsreader', 'Noto Serif SC', 'Songti SC', serif;
  --font-display: 'Archivo', 'Inter', 'Noto Sans SC', sans-serif;
  --font-display-cjk: 'Noto Serif SC', 'Songti SC', STSong, serif;
  --display-weight: 700;
  --display-stretch: 110%;
  --display-case: none;
  --display-tracking: -0.025em;
  --display-leading: 1;
  --cjk-widen: 1.1;
  --label-case: none;
  --label-tracking: 0;

  --radius: 10px;
  --radius-control: 8px;
  --radius-panel: 14px;
  --radius-slide: 6px;
  --outline-w: 1px;
  --outline-w-strong: 1px;
  --outline-color: var(--border);
  --shadow-raised: 0 4px 6px -4px rgb(0 0 0 / 0.05), 0 10px 15px -3px rgb(0 0 0 / 0.05);
  --shadow-overlay: 0 25px 50px -12px rgb(0 0 0 / 0.2);
  --glass-fill: 72%;
  --glass-blur: 24px;
  --sticker-edge-w: 0px;
  --sticker-tilt: 0deg;
  --sticker-shadow: none;
  --kf-dot: 8px;
  --kf-dot-now: 10px;
  --kf-line: 1.5px;
}
[data-system='ink'][data-mode='dark'] {
  --ink: oklch(0.93 0 0);
  --background: oklch(0.2178 0 0);
  --card: oklch(0.19 0 0);
  --card-2: oklch(0.25 0 0);
  --popover: oklch(0.235 0 0);
  --stage: oklch(0.165 0 0);
  --primary: oklch(0.87 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --lamp: oklch(0.74 0.17 52);
  --lamp-ink: oklch(0.17 0.02 50);
  --ink-alpha-secondary: 60%;
  --ink-alpha-tertiary: 36%;
  --ink-alpha-quaternary: 22%;
  --wash-alpha-muted: 6%;
  --wash-alpha-accent: 10%;
  --wash-alpha-border: 10%;
  --shadow-raised: 0 4px 6px -4px rgb(0 0 0 / 0.2), 0 10px 15px -3px rgb(0 0 0 / 0.2);
  --shadow-overlay: 0 25px 50px -12px rgb(0 0 0 / 0.5);
}

/* keyframe · 关键帧 · balance.
   D's expanded grotesk and mono, L1's ink outline and keyframe track, T1's
   wide Song for 幻灯. Concrete greys; the lamp is the only colour. */
[data-system='keyframe'] {
  --ink: #1a1a1f;
  --background: #e4e5e2;
  --card: #f2f2ef;
  --card-2: #e9eae6;
  --popover: #f7f7f4;
  --stage: #d8d9d5;
  --primary: #1a1a1f;
  --primary-foreground: #f2f2ef;
  --destructive: #c8361b;
  --lamp: #ff6a1a;
  --lamp-2: #ffb83d;
  --lamp-ink: #1a1a1f;
  --seal: #e8432a;
  --select: var(--ink);
  --edge: #ffffff;
  --pop-1: #ffb83d;
  --pop-2: #cfe9fb;
  --pop-3: #ffd6e5;
  --pop-4: #d3f1de;

  --ink-alpha-secondary: 64%;
  --ink-alpha-tertiary: 42%;
  --ink-alpha-quaternary: 24%;
  --wash-alpha-muted: 5%;
  --wash-alpha-accent: 9%;
  --wash-alpha-border: 14%;

  --font-ui: 'Archivo', -apple-system, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, Menlo, 'PingFang SC', monospace;
  --font-serif: 'Noto Serif SC', 'Songti SC', STSong, serif;
  --font-display: 'Archivo', 'Noto Sans SC', sans-serif;
  --font-display-cjk: 'Noto Serif SC', 'Songti SC', STSong, serif;
  --display-weight: 800;
  --display-stretch: 125%;
  --display-case: uppercase;
  --display-tracking: -0.03em;
  --display-leading: 0.92;
  --cjk-widen: 1.25;
  --label-case: lowercase;
  --label-tracking: 0;

  --radius: 10px;
  --radius-control: 8px;
  --radius-panel: 16px;
  --radius-slide: 10px;
  --outline-w: 1.5px;
  --outline-w-strong: 2.5px;
  --outline-color: var(--ink);
  --shadow-raised: none;
  --shadow-overlay: 0 18px 40px -18px rgb(26 26 31 / 0.45);
  --glass-fill: 100%;
  --glass-blur: 0px;
  --sticker-edge-w: 6px;
  --sticker-tilt: -3deg;
  --sticker-shadow: 0 10px 20px rgb(26 26 31 / 0.25);
  --kf-dot: 10px;
  --kf-dot-now: 16px;
  --kf-line: 2px;
}
[data-system='keyframe'][data-mode='dark'] {
  --ink: #f2f2ef;
  --background: #111113;
  --card: #1b1b1f;
  --card-2: #24242a;
  --popover: #222227;
  --stage: #0a0a0c;
  --primary: #f2f2ef;
  --primary-foreground: #1a1a1f;
  --destructive: #ff6b4e;
  --lamp: #ff7a2e;
  --lamp-ink: #111113;
  --ink-alpha-secondary: 66%;
  --ink-alpha-tertiary: 42%;
  --ink-alpha-quaternary: 26%;
  --wash-alpha-muted: 6%;
  --wash-alpha-accent: 10%;
  --wash-alpha-border: 14%;
  --outline-color: color-mix(in oklab, var(--ink) 50%, transparent);
  --shadow-overlay: 0 18px 40px -12px rgb(0 0 0 / 0.7);
  --sticker-shadow: 0 10px 20px rgb(0 0 0 / 0.5);
}

/* toybox · 玩具盒 · balance, cute.
   RR1 03 and 12: cream paper, thick ink line, the lit bear slide, lavender
   onion skins. Soft-plastic corners from D3; a hard 2px drop instead of a
   blur, like a moulded toy. */
[data-system='toybox'] {
  --ink: #1a1a1f;
  --background: #ede6da;
  --card: #ffffff;
  --card-2: #f7f2ea;
  --popover: #ffffff;
  --stage: #e2d9c9;
  --primary: #1a1a1f;
  --primary-foreground: #fff8e6;
  --destructive: #d8434a;
  --lamp: #f08a2b;
  --lamp-2: #ffd27a;
  --lamp-ink: #1a1a1f;
  --seal: #e8432a;
  --select: #6e5fb8;
  --edge: #ffffff;
  --pop-1: #c3b2ff;
  --pop-2: #ff9ec0;
  --pop-3: #6fd3ff;
  --pop-4: #12343c;

  --ink-alpha-secondary: 62%;
  --ink-alpha-tertiary: 40%;
  --ink-alpha-quaternary: 22%;
  --wash-alpha-muted: 5%;
  --wash-alpha-accent: 9%;
  --wash-alpha-border: 12%;

  --font-ui: 'Bricolage Grotesque', -apple-system, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, Menlo, 'PingFang SC', monospace;
  --font-serif: 'Noto Serif SC', 'Songti SC', STSong, serif;
  --font-display: 'Bricolage Grotesque', 'Noto Sans SC', sans-serif;
  --font-display-cjk: 'Noto Serif SC', 'Songti SC', STSong, serif;
  --display-weight: 800;
  --display-stretch: 100%;
  --display-case: none;
  --display-tracking: -0.035em;
  --display-leading: 0.98;
  --cjk-widen: 1.15;
  --label-case: lowercase;
  --label-tracking: 0;

  --radius: 14px;
  --radius-control: 12px;
  --radius-panel: 22px;
  --radius-slide: 12px;
  --outline-w: 2px;
  --outline-w-strong: 3px;
  --outline-color: var(--ink);
  --shadow-raised: 0 2px 0 var(--ink);
  --shadow-overlay: 0 4px 0 var(--ink), 0 24px 48px -20px rgb(26 26 31 / 0.35);
  --glass-fill: 100%;
  --glass-blur: 0px;
  --sticker-edge-w: 5px;
  --sticker-tilt: -4deg;
  --sticker-shadow: 0 3px 0 var(--ink);
  --kf-dot: 12px;
  --kf-dot-now: 18px;
  --kf-line: 3px;
}
[data-system='toybox'][data-mode='dark'] {
  --ink: #f7f2ea;
  --background: #0f2a30;
  --card: #163840;
  --card-2: #1d444d;
  --popover: #1a3f47;
  --stage: #0a1e23;
  --primary: #f7f2ea;
  --primary-foreground: #12343c;
  --destructive: #ff7a7f;
  --lamp: #ffb45a;
  --lamp-ink: #12343c;
  --select: #c3b2ff;
  --ink-alpha-secondary: 68%;
  --ink-alpha-tertiary: 44%;
  --ink-alpha-quaternary: 26%;
  --wash-alpha-muted: 7%;
  --wash-alpha-accent: 11%;
  --wash-alpha-border: 16%;
  --outline-color: color-mix(in oklab, var(--ink) 80%, transparent);
  --shadow-raised: 0 2px 0 rgb(0 0 0 / 0.45);
  --shadow-overlay: 0 4px 0 rgb(0 0 0 / 0.45), 0 24px 48px -20px rgb(0 0 0 / 0.6);
  --sticker-shadow: 0 3px 0 rgb(0 0 0 / 0.45);
}

/* showtime · 放映 · all new. Dark-first.
   B3: plum night, die-cut stickers with a thick white edge and a tilt,
   Dela Gothic for the loud words, DM Sans and DM Mono for the rest. CC3:
   the lamp's beam lights the timeline. Pills for every control. */
[data-system='showtime'] {
  --ink: #f4f1f7;
  --background: #1b1822;
  --card: #24212b;
  --card-2: #2e2a37;
  --popover: #2e2a37;
  --stage: #121016;
  --primary: #f4f1f7;
  --primary-foreground: #24212b;
  --destructive: #ff5c7a;
  --lamp: #ff8a2b;
  --lamp-2: #ffe2b8;
  --lamp-ink: #24212b;
  --seal: #ff5c3a;
  --select: #ffffff;
  --edge: #ffffff;
  --pop-1: #ff6fa8;
  --pop-2: #8fe3c6;
  --pop-3: #9b8cff;
  --pop-4: #ffe14d;

  --ink-alpha-secondary: 68%;
  --ink-alpha-tertiary: 46%;
  --ink-alpha-quaternary: 26%;
  --wash-alpha-muted: 6%;
  --wash-alpha-accent: 10%;
  --wash-alpha-border: 12%;

  --font-ui: 'DM Sans', -apple-system, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, Menlo, 'PingFang SC', monospace;
  --font-serif: 'Noto Serif SC', 'Songti SC', STSong, serif;
  --font-display: 'Dela Gothic One', 'Noto Sans SC', sans-serif;
  --font-display-cjk: 'Dela Gothic One', 'Noto Sans SC', sans-serif;
  --display-weight: 400;
  --display-stretch: 100%;
  --display-case: none;
  --display-tracking: -0.01em;
  --display-leading: 1.02;
  --cjk-widen: 1;
  --label-case: lowercase;
  --label-tracking: 0.01em;

  --radius: 16px;
  --radius-control: 999px;
  --radius-panel: 24px;
  --radius-slide: 14px;
  --outline-w: 0px;
  --outline-w-strong: 0px;
  --outline-color: transparent;
  --shadow-raised: 0 10px 20px rgb(0 0 0 / 0.3);
  --shadow-overlay: 0 24px 60px -12px rgb(0 0 0 / 0.65);
  --glass-fill: 90%;
  --glass-blur: 18px;
  --sticker-edge-w: 5px;
  --sticker-tilt: -4deg;
  --sticker-shadow: 0 10px 20px rgb(0 0 0 / 0.35);
  --kf-dot: 12px;
  --kf-dot-now: 20px;
  --kf-line: 3px;
}
[data-system='showtime'][data-mode='light'] {
  --ink: #24212b;
  --background: #f4f1f7;
  --card: #ffffff;
  --card-2: #ebe6f1;
  --popover: #ffffff;
  --stage: #e3dcea;
  --primary: #24212b;
  --primary-foreground: #ffffff;
  --destructive: #d8335a;
  --lamp: #ff7a12;
  --select: #24212b;
  --edge: #ffffff;
  --ink-alpha-secondary: 64%;
  --ink-alpha-tertiary: 42%;
  --ink-alpha-quaternary: 22%;
  --wash-alpha-muted: 5%;
  --wash-alpha-accent: 8%;
  --wash-alpha-border: 11%;
  --shadow-raised: 0 8px 16px rgb(36 33 43 / 0.12);
  --shadow-overlay: 0 24px 50px -16px rgb(36 33 43 / 0.35);
  --sticker-shadow: 0 8px 16px rgb(36 33 43 / 0.2);
}

/* Who it is (design principles §2 人暖，机器冷): warm is a person, us;
   cool is the machine. The same in every system, as in the editor's
   system.css. Only where a thing must say which. */
[data-system] {
  --human: oklch(0.68 0.17 50);
  --human-2: oklch(0.8 0.15 85);
  --machine: oklch(0.6 0.14 240);
  --machine-2: oklch(0.56 0.18 290);
}
[data-system][data-mode='dark'] {
  --human: oklch(0.75 0.16 50);
  --human-2: oklch(0.85 0.14 85);
  --machine: oklch(0.76 0.12 235);
  --machine-2: oklch(0.72 0.15 290);
}

/* --- 3. DERIVED — computed once from the inputs, for every system ------- */

[data-system],
.lt-flip {
  --foreground: var(--ink);
  --muted-foreground: color-mix(in oklab, var(--ink) var(--ink-alpha-secondary), transparent);
  --tertiary-foreground: color-mix(in oklab, var(--ink) var(--ink-alpha-tertiary), transparent);
  --quaternary-foreground: color-mix(in oklab, var(--ink) var(--ink-alpha-quaternary), transparent);
  --muted: color-mix(in oklab, var(--ink) var(--wash-alpha-muted), transparent);
  --accent-wash: color-mix(in oklab, var(--ink) var(--wash-alpha-accent), transparent);
  --border: color-mix(in oklab, var(--ink) var(--wash-alpha-border), transparent);
  --ring: var(--select);
  --glass: color-mix(in oklab, var(--card) var(--glass-fill), transparent);
  --glass-popover: color-mix(in oklab, var(--popover) calc(var(--glass-fill) + 10%), transparent);
  --lamp-soft: color-mix(in oklab, var(--lamp) 18%, transparent);
  --human-soft: color-mix(in oklab, var(--human) 18%, transparent);
  --machine-soft: color-mix(in oklab, var(--machine) 18%, transparent);
  --lamp-glow: 0 0 0 4px var(--lamp-soft), 0 0 18px color-mix(in oklab, var(--lamp) 55%, transparent);
  --kf-off: var(--quaternary-foreground);
  --kf-lit: var(--lamp);
  --beam: linear-gradient(
    180deg,
    color-mix(in oklab, var(--lamp-2) 70%, transparent),
    color-mix(in oklab, var(--lamp) 8%, transparent)
  );

  color: var(--foreground);
  font-family: var(--font-ui);
}

/* A zone that flips to the other ink, inside any system (a dark plate on a
   light page): swap the two colours, the ladder re-derives above. */
.lt-flip {
  --ink: var(--primary-foreground);
  --card: var(--primary);
  --card-2: color-mix(in oklab, var(--primary) 88%, var(--primary-foreground));
  --outline-color: color-mix(in oklab, var(--primary-foreground) 30%, transparent);
  background: var(--card);
}