/* Atrium tokens (Arkha Yellow liquid glass).
 *
 * Source of truth: design/ledger-atrium-ui-direction-plan-20261019.html (light),
 * its dark palette block `html[data-preview-theme=dark]` (dark), and
 * design/ledger-mitra-admin-direction-20261020.html (operator surfaces).
 *
 * RULES
 *  1. Components read `--at-*` tokens only. Never a literal colour in a component.
 *  2. Dark values live in TWO identical blocks (data-theme="dark" and the
 *     prefers-color-scheme fallback). tests/test_atrium_foundation.py fails when
 *     they drift apart, so edit both together.
 *  3. The legacy vocabulary (--paper, --panel, --ink, --line, ...) is aliased at
 *     the bottom so carried-over widget CSS and old inline snippets keep working
 *     under Atrium. New code must not use the aliases.
 */
@layer atrium.tokens, atrium.base, atrium.widgets, atrium.shell, atrium.components, atrium.compat, atrium.pages;

@layer atrium.tokens {
  :root {
    color-scheme: light;

    /* Canvas and ambient light */
    --at-canvas: #fff2cc;
    --at-glow-1: #ffd45d88;
    --at-glow-2: #ffd45d00;

    /* Surfaces: glass shell 78-86%, work panel 90-94%, data surface 96-100% */
    --at-glass-shell: #fffdf8e8;
    --at-glass-panel: #ffffffed;
    --at-glass-header: #fffffff0;
    --at-surface: #ffffff;
    --at-surface-card: linear-gradient(145deg, #ffffff, #fffefb);
    --at-surface-raised: #fffdf9;
    --at-surface-sunk: #f7f6f2;
    --at-surface-group: #f5f4f0;
    --at-surface-hover: #fffdf4;
    --at-surface-selected: #fff5d4;
    --at-surface-chip: #efefea;
    --at-surface-track: #eeece5b3;
    --at-surface-menu: linear-gradient(140deg, #fffffffa, #fffdf5f7);
    --at-surface-dialog: linear-gradient(145deg, #fffefbf5, #fffffff5);
    --at-surface-foot: #fffaf1;
    --at-surface-note: #fff2ce99;
    --at-surface-fieldset: #fffdfa;
    --at-surface-float: #fffdf3f2;
    --at-edge: #ffffff;
    --at-window-bg: radial-gradient(ellipse at 100% 0%, #ffd45d88, transparent 58%), #fff2cc;
    --at-window-page-bg: radial-gradient(ellipse at 95% 0%, #ffe49c70, transparent 36%), radial-gradient(ellipse at 0% 55%, #fff0c066, transparent 40%), #fffaf0;

    /* Lines */
    --at-line: #e7e4da;
    --at-line-soft: #eceee8;
    --at-line-card: #eae7df;
    --at-line-control: #d9d4c6;
    --at-line-strong: #c9c4b6;
    --at-line-header: #dedbd1;
    --at-line-tabs: #eae7de;
    --at-line-btn: #dce0d5;
    --at-ink-tab: #665f51;
    --at-control-bg: #ffffff99;

    /* Ink */
    --at-ink: #29271f;
    --at-ink-2: #686457;
    --at-ink-3: #756e5e;
    --at-link: #76530d;

    /* Accent: yellow for action, dark amber for attention */
    --at-accent: #f5b400;
    --at-accent-grad: linear-gradient(180deg, #ffda63, #ffc32a);
    --at-accent-grad-hover: linear-gradient(180deg, #ffdf78, #ffc83b);
    --at-accent-line: #e4ae2a;
    --at-on-accent: #302405;
    --at-amber-soft: #fff4ce;
    --at-amber-active: linear-gradient(135deg, #ffe8a2, #ffdd7eaa);
    --at-amber-active-ink: #624607;
    --at-amber-highlight: #fff0ba;
    --at-switch-active: linear-gradient(180deg, #fffaf0, #ffe9a5);
    --at-tab-line: #edb52b;
    --at-focus: #8a6200;
    --at-bar-late: #b88600;
    --at-bar-later: #d5d5d5;
    --at-bar-other: #cfcfcf;
    --at-bar-unknown: #a3a3a3;
    --at-focus-ring: #f5b40026;
    --at-focus-ring-soft: #f5b40015;
    --at-check-accent: #d8a01e;
    --at-check-accent-toolbar: #d9a000;
    --at-check-accent-table: #dca817;
    --at-focus-alt: #1c64f2;
    --at-on-accent-warm: #241a00;
    --at-ink-nav: #554e40;
    --at-ink-nav-2: #5b5546;
    --at-nav-active: linear-gradient(120deg, #ffe9a7, #ffdf86);
    --at-nav-active-ink: #533e0b;
    --at-nav-child-active: #fff8e6;
    --at-nav-child-active-ink: #513b05;
    --at-nav-child-ring: #f2d178;
    --at-sep: #eab333;
    --at-ink-note: #696153;
    --at-banner-ink: #6c6047;
    --at-ink-search: #777163;
    --at-line-search: #dfdbd0;
    --at-banner-bg: linear-gradient(110deg, #fff2cb, #fffdf6);
    --at-surface-due: #fafaf7;
    --at-line-due: #e6e3da;
    --at-task-avatar-bg: #f3eed9;
    --at-task-avatar-ink: #635634;
    --at-pill-bg: #fffefa;
    --at-pill-line: #e8e1d2;
    --at-bell-bg: #f5f2e9;
    --at-ink-icon: #625d51;
    --at-line-profile: #e7e1d4;
    --at-avatar-grad: linear-gradient(140deg, #fff3ca, #edbf43);
    --at-avatar-ink: #574008;

    /* Status */
    --at-attn-bg: #fff1c8;
    --at-attn-ink: #775507;
    --at-good-bg: #eaf2e8;
    --at-good-ink: #355f31;
    --at-bad-bg: #fff0e8;
    --at-bad-ink: #93401b;
    --at-error-bg: #faeae7;
    --at-error-ink: #963d30;
    --at-neg: #a44133;
    --at-danger-solid: #b24432;
    --at-info-bg: #eaf1fd;
    --at-info-ink: #1d4fa3;

    /* Overlays */
    --at-scrim: #71664a25;
    --at-toast-bg: #fffdf5;
    --at-toast-ink: #302b1e;
    --at-toast-line: #e9dfc6;
    --at-close-bg: #efeee8;
    --at-close-bg-hover: #e3e2dc;
    --at-close-ink: #5f605b;

    /* Elevation */
    --at-shadow-shell: 0 6px 24px #92763b0a, inset 0 1px 0 #fff;
    --at-shadow-panel: 0 8px 24px #8a6f3510;
    --at-shadow-card: inset 0 1px 0 #fff, 0 6px 20px #8b6f2907;
    --at-shadow-menu: 0 12px 32px #65532421, inset 0 1px 0 #fff;
    --at-shadow-float: 0 14px 50px #66522333, inset 0 1px 0 #fff;
    --at-shadow-dialog: 0 24px 80px #1c231f24;
    --at-shadow-button: inset 0 1px 0 #fff9, 0 3px 8px #b8860b12;
    --at-blur: 20px;

    /* Shape */
    --at-r-shell: 22px;
    --at-r-panel: 20px;
    --at-r-card: 18px;
    --at-r-table: 14px;
    --at-r-fieldset: 16px;
    --at-r-dialog: 18px;
    --at-r-drawer: 24px;
    --at-r-pill: 999px;
    --at-r-field: 999px;
    --at-r-textarea: 12px;

    /* Layout */
    --at-gutter: 12px;
    --at-gap: 12px;
    --at-inset: 26px;
    --at-sidebar-w: 206px;
    --at-control-h: 40px;
    --at-header-h: 76px;

    /* Type */
    --at-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --at-font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --at-font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --at-fs-title: 20px;
    --at-fs-section: 16px;
    --at-fs-body: 14px;
    --at-fs-table: 13px;
    --at-fs-meta: 12px;
    --at-fs-micro: 11px;

    /* Motion */
    --at-ease: cubic-bezier(.22, 1, .36, 1);
    --at-t-fast: 140ms;
    --at-t-switch: 200ms;
    --at-t-row: 240ms;
    --at-t-drawer: 260ms;

    /* Shell C (kerangka tiga lapis, design/mockup-kerangka-halaman-20261114.html, frame C).
       L1 bingkai kaca dasar, L2 lembar kaca (latar menu), L3 panel modul. Hanya dipakai shell-c.css. */
    --at-c-canvas: radial-gradient(ellipse 65% 36% at 83% 2%, rgba(255,225,153,.40), transparent 70%), linear-gradient(145deg, #faf8f1, #f3eddc 65%, #faf6ec);
    --at-c-l1: linear-gradient(135deg, rgba(255,255,255,.80), rgba(250,243,225,.62));
    --at-c-l1-edge: rgba(255,255,255,.95);
    --at-c-l1-shadow: 0 18px 48px rgba(76,63,30,.13), inset 0 1px 0 #fff;
    --at-c-l2: linear-gradient(160deg, rgba(255,255,255,.58), rgba(255,233,176,.30));
    --at-c-l2-edge: rgba(255,255,255,.85);
    --at-c-l2-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(150,120,40,.10), 0 6px 18px rgba(76,63,30,.07);
    --at-c-l3: #fff;
    --at-c-l3-edge: rgba(255,255,255,.9);
    --at-c-l3-shadow: 0 10px 28px rgba(48,40,20,.15), 0 1px 3px rgba(48,40,20,.08);
    --at-c-rule: rgba(80,70,40,.12);
    --at-c-rule-strong: rgba(80,70,40,.18);
    --at-c-hover: rgba(255,255,255,.5);
    --at-c-kid-active: linear-gradient(110deg, #f5bd25, #ffe59d);
    --at-c-kid-active-ink: #3f3108;
    --at-c-kid-active-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px rgba(196,144,0,.18);
    --at-c-pop-bg: rgba(255,253,247,.88);
    --at-c-pop-edge: rgba(255,255,255,.95);
    --at-c-pop-shadow: 0 18px 40px rgba(76,63,30,.20), 0 2px 6px rgba(76,63,30,.08);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --at-canvas: #1c1b18;
    --at-glow-1: #f5c51820;
    --at-glow-2: #f5c5180c;
    --at-glass-shell: #232220f0;
    --at-glass-panel: #232220f5;
    --at-glass-header: #232220f2;
    --at-surface: #2a2926;
    --at-surface-card: #2a2926;
    --at-surface-raised: #33322e;
    --at-surface-sunk: #232220;
    --at-surface-group: #302f2b;
    --at-surface-hover: #34322b;
    --at-surface-selected: #4a3e17;
    --at-surface-chip: #36352f;
    --at-surface-track: #45443d;
    --at-surface-menu: #33322e;
    --at-surface-dialog: #33322e;
    --at-surface-foot: #2a2926;
    --at-surface-note: #3b3319;
    --at-surface-fieldset: #2a2926;
    --at-surface-float: #33322ef5;
    --at-edge: #34332e;
    --at-window-bg: #232220;
    --at-window-page-bg: #1c1b18;
    --at-line: #3a3934;
    --at-line-soft: #34332e;
    --at-line-card: #3a3934;
    --at-line-control: #4a4944;
    --at-line-strong: #66645b;
    --at-line-header: #3a3934;
    --at-line-tabs: #34332e;
    --at-line-btn: #4a4944;
    --at-ink-tab: #c4c0b4;
    --at-control-bg: #ffffff0a;
    --at-ink: #e9e6dc;
    --at-ink-2: #bdb9ad;
    --at-ink-3: #b4b0a3;
    --at-link: #f7d65a;
    --at-accent: #f5c518;
    --at-accent-grad: linear-gradient(180deg, #f8d44a, #f5c518);
    --at-accent-grad-hover: linear-gradient(180deg, #fbdc66, #f7cb2a);
    --at-accent-line: #d9ac12;
    --at-on-accent: #1c1b18;
    --at-amber-soft: #3b3319;
    --at-amber-active: linear-gradient(135deg, #4a3e17, #403716);
    --at-amber-active-ink: #ffe08a;
    --at-amber-highlight: #4a3e17;
    --at-switch-active: linear-gradient(180deg, #403716, #4a3e17);
    --at-tab-line: #f5c518;
    --at-focus: #ffd84a;
    --at-bar-late: #d9ac12;
    --at-bar-later: #4a4944;
    --at-bar-other: #4a4944;
    --at-bar-unknown: #66645b;
    --at-focus-ring: #f5c51833;
    --at-focus-ring-soft: #f5c51822;
    --at-check-accent: #f5c518;
    --at-check-accent-toolbar: #f5c518;
    --at-check-accent-table: #f5c518;
    --at-focus-alt: #7fb0ff;
    --at-on-accent-warm: #241a00;
    --at-ink-nav: #d6d2c6;
    --at-ink-nav-2: #c4c0b4;
    --at-nav-active: linear-gradient(120deg, #4a3e17, #403716);
    --at-nav-active-ink: #ffe08a;
    --at-nav-child-active: #3b3319;
    --at-nav-child-active-ink: #ffe08a;
    --at-nav-child-ring: #5e4f20;
    --at-sep: #f5c518;
    --at-ink-note: #bdb9ad;
    --at-banner-ink: #fff0c4;
    --at-ink-search: #b4b0a3;
    --at-line-search: #4a4944;
    --at-banner-bg: linear-gradient(110deg, #3b3319, #2f2d26);
    --at-surface-due: #2a2926;
    --at-line-due: #3a3934;
    --at-task-avatar-bg: #36352f;
    --at-task-avatar-ink: #e9d9a6;
    --at-pill-bg: #302f2b;
    --at-pill-line: #4a4944;
    --at-bell-bg: #36352f;
    --at-ink-icon: #d6d2c6;
    --at-line-profile: #4a4944;
    --at-avatar-grad: linear-gradient(140deg, #fff3ca, #edbf43);
    --at-avatar-ink: #574008;
    --at-attn-bg: #43360f;
    --at-attn-ink: #ffde85;
    --at-good-bg: #1f3320;
    --at-good-ink: #a9dda0;
    --at-bad-bg: #3f2220;
    --at-bad-ink: #ffb4a2;
    --at-error-bg: #3f2220;
    --at-error-ink: #ffaea2;
    --at-neg: #ffaea2;
    --at-danger-solid: #dc2626;
    --at-info-bg: #17283d;
    --at-info-ink: #92bdf7;
    --at-scrim: #0009;
    --at-toast-bg: #3a3934;
    --at-toast-ink: #e9e6dc;
    --at-toast-line: #4a4944;
    --at-close-bg: #3a3934;
    --at-close-bg-hover: #4a4944;
    --at-close-ink: #e9e6dc;
    --at-shadow-shell: 0 6px 24px #0006, inset 0 1px 0 #ffffff0c;
    --at-shadow-panel: 0 8px 24px #0006;
    --at-shadow-card: inset 0 1px 0 #ffffff0a, 0 4px 14px #0005;
    --at-shadow-menu: 0 12px 32px #0008, inset 0 1px 0 #ffffff12;
    --at-shadow-float: 0 14px 50px #0009, inset 0 1px 0 #ffffff12;
    --at-shadow-dialog: 0 24px 80px #000b;
    --at-shadow-button: inset 0 1px 0 #ffffff55, 0 3px 8px #0005;

    /* Shell C, gelap: nuansa cokelat hangat Atrium. */
    --at-c-canvas: radial-gradient(ellipse 65% 36% at 83% 2%, rgba(120,98,40,.28), transparent 70%), linear-gradient(145deg, #1d1c19, #141311 65%, #1b1a17);
    --at-c-l1: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    --at-c-l1-edge: rgba(255,255,255,.12);
    --at-c-l1-shadow: 0 18px 48px rgba(0,0,0,.4);
    --at-c-l2: linear-gradient(160deg, rgba(255,255,255,.09), rgba(245,197,24,.05));
    --at-c-l2-edge: rgba(255,255,255,.14);
    --at-c-l2-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 18px rgba(0,0,0,.25);
    --at-c-l3: #282723;
    --at-c-l3-edge: rgba(255,255,255,.12);
    --at-c-l3-shadow: 0 10px 28px rgba(0,0,0,.45);
    --at-c-rule: rgba(255,255,255,.12);
    --at-c-rule-strong: rgba(255,255,255,.18);
    --at-c-hover: rgba(255,255,255,.07);
    --at-c-kid-active: linear-gradient(110deg, #f5bd25, #ffe59d);
    --at-c-kid-active-ink: #3f3108;
    --at-c-kid-active-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 2px 6px rgba(0,0,0,.35);
    --at-c-pop-bg: rgba(44,43,38,.90);
    --at-c-pop-edge: rgba(255,255,255,.14);
    --at-c-pop-shadow: 0 18px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --at-canvas: #1c1b18;
      --at-glow-1: #f5c51820;
      --at-glow-2: #f5c5180c;
      --at-glass-shell: #232220f0;
      --at-glass-panel: #232220f5;
      --at-glass-header: #232220f2;
      --at-surface: #2a2926;
      --at-surface-card: #2a2926;
      --at-surface-raised: #33322e;
      --at-surface-sunk: #232220;
      --at-surface-group: #302f2b;
      --at-surface-hover: #34322b;
      --at-surface-selected: #4a3e17;
      --at-surface-chip: #36352f;
      --at-surface-track: #45443d;
      --at-surface-menu: #33322e;
      --at-surface-dialog: #33322e;
      --at-surface-foot: #2a2926;
      --at-surface-note: #3b3319;
      --at-surface-fieldset: #2a2926;
      --at-surface-float: #33322ef5;
      --at-edge: #34332e;
      --at-window-bg: #232220;
      --at-window-page-bg: #1c1b18;
      --at-line: #3a3934;
      --at-line-soft: #34332e;
      --at-line-card: #3a3934;
      --at-line-control: #4a4944;
      --at-line-strong: #66645b;
      --at-line-header: #3a3934;
      --at-line-tabs: #34332e;
      --at-line-btn: #4a4944;
      --at-ink-tab: #c4c0b4;
      --at-control-bg: #ffffff0a;
      --at-ink: #e9e6dc;
      --at-ink-2: #bdb9ad;
      --at-ink-3: #b4b0a3;
      --at-link: #f7d65a;
      --at-accent: #f5c518;
      --at-accent-grad: linear-gradient(180deg, #f8d44a, #f5c518);
      --at-accent-grad-hover: linear-gradient(180deg, #fbdc66, #f7cb2a);
      --at-accent-line: #d9ac12;
      --at-on-accent: #1c1b18;
      --at-amber-soft: #3b3319;
      --at-amber-active: linear-gradient(135deg, #4a3e17, #403716);
      --at-amber-active-ink: #ffe08a;
      --at-amber-highlight: #4a3e17;
      --at-switch-active: linear-gradient(180deg, #403716, #4a3e17);
      --at-tab-line: #f5c518;
      --at-focus: #ffd84a;
      --at-bar-late: #d9ac12;
      --at-bar-later: #4a4944;
      --at-bar-other: #4a4944;
      --at-bar-unknown: #66645b;
      --at-focus-ring: #f5c51833;
      --at-focus-ring-soft: #f5c51822;
      --at-check-accent: #f5c518;
      --at-check-accent-toolbar: #f5c518;
      --at-check-accent-table: #f5c518;
      --at-focus-alt: #7fb0ff;
      --at-on-accent-warm: #241a00;
      --at-ink-nav: #d6d2c6;
      --at-ink-nav-2: #c4c0b4;
      --at-nav-active: linear-gradient(120deg, #4a3e17, #403716);
      --at-nav-active-ink: #ffe08a;
      --at-nav-child-active: #3b3319;
      --at-nav-child-active-ink: #ffe08a;
      --at-nav-child-ring: #5e4f20;
      --at-sep: #f5c518;
    --at-ink-note: #bdb9ad;
    --at-banner-ink: #fff0c4;
    --at-ink-search: #b4b0a3;
    --at-line-search: #4a4944;
    --at-banner-bg: linear-gradient(110deg, #3b3319, #2f2d26);
    --at-surface-due: #2a2926;
    --at-line-due: #3a3934;
    --at-task-avatar-bg: #36352f;
    --at-task-avatar-ink: #e9d9a6;
      --at-pill-bg: #302f2b;
      --at-pill-line: #4a4944;
      --at-bell-bg: #36352f;
      --at-ink-icon: #d6d2c6;
      --at-line-profile: #4a4944;
      --at-avatar-grad: linear-gradient(140deg, #fff3ca, #edbf43);
      --at-avatar-ink: #574008;
      --at-attn-bg: #43360f;
      --at-attn-ink: #ffde85;
      --at-good-bg: #1f3320;
      --at-good-ink: #a9dda0;
      --at-bad-bg: #3f2220;
      --at-bad-ink: #ffb4a2;
      --at-error-bg: #3f2220;
      --at-error-ink: #ffaea2;
      --at-neg: #ffaea2;
      --at-danger-solid: #dc2626;
      --at-info-bg: #17283d;
      --at-info-ink: #92bdf7;
      --at-scrim: #0009;
      --at-toast-bg: #3a3934;
      --at-toast-ink: #e9e6dc;
      --at-toast-line: #4a4944;
      --at-close-bg: #3a3934;
      --at-close-bg-hover: #4a4944;
      --at-close-ink: #e9e6dc;
      --at-shadow-shell: 0 6px 24px #0006, inset 0 1px 0 #ffffff0c;
      --at-shadow-panel: 0 8px 24px #0006;
      --at-shadow-card: inset 0 1px 0 #ffffff0a, 0 4px 14px #0005;
      --at-shadow-menu: 0 12px 32px #0008, inset 0 1px 0 #ffffff12;
      --at-shadow-float: 0 14px 50px #0009, inset 0 1px 0 #ffffff12;
      --at-shadow-dialog: 0 24px 80px #000b;
      --at-shadow-button: inset 0 1px 0 #ffffff55, 0 3px 8px #0005;

    /* Shell C, gelap: nuansa cokelat hangat Atrium. */
    --at-c-canvas: radial-gradient(ellipse 65% 36% at 83% 2%, rgba(120,98,40,.28), transparent 70%), linear-gradient(145deg, #1d1c19, #141311 65%, #1b1a17);
    --at-c-l1: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    --at-c-l1-edge: rgba(255,255,255,.12);
    --at-c-l1-shadow: 0 18px 48px rgba(0,0,0,.4);
    --at-c-l2: linear-gradient(160deg, rgba(255,255,255,.09), rgba(245,197,24,.05));
    --at-c-l2-edge: rgba(255,255,255,.14);
    --at-c-l2-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 18px rgba(0,0,0,.25);
    --at-c-l3: #282723;
    --at-c-l3-edge: rgba(255,255,255,.12);
    --at-c-l3-shadow: 0 10px 28px rgba(0,0,0,.45);
    --at-c-rule: rgba(255,255,255,.12);
    --at-c-rule-strong: rgba(255,255,255,.18);
    --at-c-hover: rgba(255,255,255,.07);
    --at-c-kid-active: linear-gradient(110deg, #f5bd25, #ffe59d);
    --at-c-kid-active-ink: #3f3108;
    --at-c-kid-active-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 2px 6px rgba(0,0,0,.35);
    --at-c-pop-bg: rgba(44,43,38,.90);
    --at-c-pop-edge: rgba(255,255,255,.14);
    --at-c-pop-shadow: 0 18px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
    }
  }

  /* Legacy vocabulary, aliased onto Atrium so carried-over widget CSS and any
     leftover inline snippet follow the theme. Do not use in new code. */
  :root {
    --paper: var(--at-canvas);
    --panel: var(--at-surface);
    --paper-raised: var(--at-surface);
    --sunk: var(--at-surface-sunk);
    --ink: var(--at-ink);
    --ink-soft: var(--at-ink-2);
    --ink-faint: var(--at-ink-3);
    --line: var(--at-line);
    --line-strong: var(--at-line-control);
    --accent: var(--at-accent);
    --accent-ink: var(--at-link);
    --accent-bg: var(--at-amber-soft);
    --accent-soft: var(--at-amber-soft);
    --on-accent: var(--at-on-accent);
    --font-ui: var(--at-font-ui);
    --font-sans: var(--at-font-ui);
    --font-num: var(--at-font-ui);
    --font-display: var(--at-font-display);
    --font-mono: var(--at-font-mono);
    --r-card: var(--at-r-card);
    --r-control: 12px;
    --r-chip: 6px;
    --control-height: var(--at-control-h);
    --shadow: var(--at-shadow-panel);
    --shadow-sm: 0 1px 2px #0000000f;
    --ok: #16a34a;
    --ok-bg: var(--at-good-bg);
    --warn: #b45309;
    --warn-bg: var(--at-attn-bg);
    --danger: #ef4444;
    --danger-bg: var(--at-error-bg);
    --info: #3b82f6;
    --info-bg: var(--at-info-bg);
    --nav-active-ink: var(--at-amber-active-ink);
    --nav-active-start: var(--at-accent);
    --danger-ink: #b42318;
    --danger-soft: var(--at-error-bg);
  }
  :root[data-theme="dark"] {
    --ok: var(--at-good-ink);
    --warn: var(--at-attn-ink);
    --danger: var(--at-neg);
    --info: var(--at-info-ink);
    --danger-ink: var(--at-error-ink);
    --shadow-sm: 0 1px 2px #0006;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ok: var(--at-good-ink);
      --warn: var(--at-attn-ink);
      --danger: var(--at-neg);
      --info: var(--at-info-ink);
      --danger-ink: var(--at-error-ink);
      --shadow-sm: 0 1px 2px #0006;
    }
  }
}