/* ai·radar design tokens · "Bento Keynote"
   Language: docs/ngon-ngu-thiet-ke.md. Showcase of every token and component state: tokens.html.

   Three layers, read top to bottom:
     1. primitive  raw values named by what they are (gray-95, brand-signature, space-24). Nothing outside this file uses them.
     2. semantic   named by role (color-canvas, color-ink-2, text-title). Light and dark differ ONLY here.
     3. component  named by the component that owns it (tile-*, num-*, av-*, ring-*).

   Where the values come from (the five principles, short):
     P1 Diện tích là thứ bậc   -> one grid, tile spans, big radius, wide gaps (space-24/32)
     P2 Mỗi ô một con số       -> a separate number scale (num-*) far above the text scale
     P3 Logo và số là màu      -> neutral ramp at chroma <= 0.012 tinted to the Hot Coral blue-grey; coral is the brand's
                                  one loud colour (logo, primary action, breaking tag), never small text on a light surface
   Brand colours: the Hot Coral palette (captain, 2026-11-06 23:38) and the Coral Tile logo (brand/logo/coral-tile/).
   Text that must be coral on a light surface uses the captain's own deeper corals (#B82F55, #B4234D); dark mode keeps
   coral as the accent and reads coral text one step lighter (#F4698A). Contrast table: brand/logo-work/hot-coral/README.md.
     P4 Khoảng thở             -> tile padding 32-48px, 4pt spacing only
     P5 Chuyển động như dòng chảy -> one easing family (decelerate), durations from the 02/10 motion spec */

:root{
  /* ---------- 1. primitive ---------- */
  --hue: 258;                                        /* the palette's blue-grey: Muted #667085 and Border #E4E7EC sit near 258° */
  --gray-99: oklch(0.993 0.003 var(--hue));
  --gray-97: oklch(0.975 0.006 var(--hue));
  --gray-96: oklch(0.962 0.007 var(--hue));
  --gray-95: oklch(0.952 0.008 var(--hue));
  --gray-93: oklch(0.932 0.009 var(--hue));
  --gray-90: oklch(0.900 0.010 var(--hue));
  --gray-80: oklch(0.800 0.010 var(--hue));
  --gray-70: oklch(0.700 0.010 var(--hue));
  --gray-51: oklch(0.510 0.012 var(--hue));
  --gray-44: oklch(0.440 0.012 var(--hue));
  --gray-30: oklch(0.300 0.010 var(--hue));
  --gray-25: oklch(0.250 0.009 var(--hue));
  --gray-21: oklch(0.210 0.009 var(--hue));
  --gray-17: oklch(0.175 0.008 var(--hue));
  --gray-13: oklch(0.135 0.006 var(--hue));
  /* Hot Coral palette, exact values the captain gave on 2026-11-06. */
  --brand-signature: #F0446E;                        /* Hot Coral: logo tile, primary action fill, breaking tag. Never small text on light */
  --brand-secondary: #5B1738;                        /* Plum: strong headers, hover of links and of the primary action */
  --brand-tech: #20C7D9;                             /* Cyan: tech icons, charts, interactive points. Never text on light */
  --brand-surface: #F7F9FC;                          /* light page surface; text colour in dark mode */
  --brand-surface-dark: #111827;                     /* dark page surface */
  --brand-card-dark: #1D2939;                        /* dark-mode card (captain's note) */
  --brand-ink: #101828;                              /* text on light surfaces; text on coral */
  --brand-muted: #667085;                            /* secondary text */
  --brand-border: #E4E7EC;                           /* card border, hairlines */
  --brand-white: #FFFFFF;                            /* light-mode card; text on plum */
  /* Coral shades the captain named for text, and the lighter coral dark mode needs to keep small text at AA. */
  --coral-text: #B82F55;                             /* coral as text on light surfaces (secondary button), 5.87 on white */
  --coral-breaking: #B4234D;                         /* breaking-news text on its wash, 5.33 */
  --coral-wash: #FFE4EA;                             /* breaking-news background */
  --coral-light: #F4698A;                            /* coral text and hover on dark, 5.06 on the dark card */
  --cyan-text: #0B6F7A;                              /* cyan as text on light ("ready", "up"), 5.88 on white */
  --cyan-wash: #E3F7F9;                              /* its background on light */
  /* Dark ramp in the palette's blue-grey (hue 262): fill and hairline above the dark card. */
  --deep-24: oklch(0.235 0.030 262);                 /* the front page's panel in dark: between the page and a card */
  --deep-33: oklch(0.330 0.030 262);
  --deep-38: oklch(0.380 0.035 262);
  --amber-47: oklch(0.48 0.11 65);
  --amber-80: oklch(0.82 0.12 75);

  --family: "Be Vietnam Pro", -apple-system, "Segoe UI", system-ui, sans-serif;
  --family-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;   /* install commands */

  --size-12: 0.75rem; --size-13: 0.8125rem; --size-14: 0.875rem; --size-15: 0.9375rem; --size-16: 1rem; --size-18: 1.125rem;
  --size-21: 1.3125rem; --size-28: 1.75rem; --size-40: 2.5rem;
  --size-32: 2rem; --size-56: 3.5rem; --size-88: 5.5rem;
  --size-76: 4.75rem; --size-112: 7rem;             /* the next-event card's countdown: beside other events, alone */

  --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px;
  --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px;

  --radius-8: 8px; --radius-12: 12px; --radius-24: 24px; --radius-full: 999px;

  --duration-150: 150ms; --duration-250: 250ms; --duration-300: 300ms; --duration-350: 350ms;
  --duration-600: 600ms; --duration-1800: 1800ms;
  --ease-flow: cubic-bezier(0.16, 1, 0.3, 1);        /* decelerate: arrives fast, settles slow, like water */
  --ease-press: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-exit: cubic-bezier(0.5, 0, 0.75, 0);

}

/* ---------- 2. semantic (light, the default). Also on any element marked data-theme="light". ---------- */
:root, [data-theme="light"]{
  --color-canvas: var(--brand-surface);              /* the page between cards: the palette's Surface */
  --color-bar: var(--brand-white);                   /* sticky navigation, distinct from the canvas */
  --color-surface: var(--brand-white);               /* a card: white with a light grey border (captain) */
  --color-inset: var(--brand-surface);               /* a panel inside a card */
  --color-fill: var(--gray-95);                      /* chips, skeleton, meter track */
  --color-hair: var(--brand-border);
  --color-card-edge: var(--brand-border);           /* white card on Surface: the captain's light grey border */
  --color-ink: var(--brand-ink);
  --color-ink-2: var(--gray-44);                     /* long supporting text: a step darker than Muted */
  --color-ink-3: var(--brand-muted);
  --color-heading: var(--brand-secondary);           /* strong headers, important titles (captain's Plum role) */
  --color-accent: var(--coral-text);                 /* coral as text: links, active tabs, standout numbers */
  --color-accent-hover: var(--brand-secondary);
  --color-accent-fill: var(--brand-signature);       /* coral as a fill: primary action, badges, bars, the new-item mark */
  --color-accent-fill-hover: var(--brand-secondary);
  --color-on-accent: var(--brand-ink);               /* ink on coral, 4.87: no small white text on coral (captain) */
  --color-on-accent-hover: var(--brand-white);       /* white on plum, 12.93 */
  --color-tech: var(--brand-tech);                   /* interactive points (the new-item dot); never text on light */
  --color-chart: var(--cyan-text);                   /* data marks on light need 3:1: the cyan one step deeper, 5.88 */
  --color-disabled: var(--color-fill);               /* a disabled control is neutral grey, never the accent */
  --color-on-disabled: var(--color-ink-3);
  --show-logo-light: block;                          /* header wordmark: the kit's primary variant on light surfaces */
  --show-logo-dark: none;
  --color-accent-wash: color-mix(in srgb, var(--brand-signature) 10%, transparent);
  /* The front page (07/11, mockup "Trang nhất"): small coloured text is Plum on light (coral stays a fill), a stronger
     hairline for hover and focus, the search highlight, and a rise in a ranking. */
  --color-link: var(--brand-secondary);
  --color-hair-strong: var(--gray-80);
  --color-mark: var(--coral-wash);
  --color-up: var(--cyan-text);
  --color-live: var(--coral-breaking);               /* breaking news: #B4234D text on #FFE4EA (captain) */
  --color-live-wash: var(--coral-wash);
  --color-live-fill: var(--coral-breaking);          /* a breaking badge laid on a picture, white text 6.39 */
  --color-mt-ink: var(--color-ink-2);
  --color-mt-bg: var(--color-fill);
  /* No outlines (captain, 08/11 21:08: "Có viền màu bao quanh nút bấm, thanh tìm kiếm, card ... Loại bỏ nó"): surfaces
     part by fill and elevation. The front page's panel, a floating bar (the phone dock), a filled field and its focus. */
  --color-panel: var(--brand-white);
  /* The front page's panel, a light cool tint, so the white cards on it part by their fill as well as their shadow;
     a segmented control's track and its chosen side (captain, 10/11 19:3x: "duyệt, gộp vào"). */
  --color-panel-front: var(--gray-95);
  --color-seg-track: var(--gray-90);
  --color-seg-thumb: var(--brand-white);
  --color-float: var(--brand-white);
  --color-field: var(--gray-95);
  --color-field-on: var(--gray-93);                  /* a field in focus, a filled button on hover */
  --color-art-wash: color-mix(in srgb, var(--brand-signature) 14%, transparent);   /* the calendar's animal, a seal behind the text */
  --color-ok: var(--cyan-text);                      /* "ready", "up", a healthy source: the palette's cyan, not a green */
  --color-ok-wash: var(--cyan-wash);
  --color-warn: var(--amber-47);
  --color-warn-wash: oklch(0.48 0.11 65 / 0.13);
  --color-media-scrim: oklch(0.13 0.006 var(--hue) / 0.62);
  --color-on-media: var(--gray-99);
  --color-scrim: oklch(0.13 0.006 var(--hue) / 0.30);
  --shadow-tint: 0.25 0.02 var(--hue);
  --av-mono-bg: 0.93 0.035;                         /* monogram tile: oklch lightness + chroma; hue is per publisher */
  --av-mono-ink: 0.38 0.09;
  --shadow-lift: 0 1px 2px oklch(var(--shadow-tint) / 0.05), 0 12px 32px oklch(var(--shadow-tint) / 0.10);
  --shadow-sheet: 0 2px 6px oklch(var(--shadow-tint) / 0.06), 0 32px 80px oklch(var(--shadow-tint) / 0.20);

  --text-micro: var(--size-12);
  --text-meta: var(--size-13);
  --text-small: var(--size-14);
  --text-sub: var(--size-15);                        /* supporting text: why-line, summaries, original headline ~15px */
  --text-body: var(--size-16);
  --text-title: var(--size-18);
  --text-tile: var(--size-21);                       /* tile heading */
  --text-feature: var(--size-28);
  --text-lead: clamp(var(--size-28), 1.2rem + 1.4vw, var(--size-40));
  --leading-body: 1.55;                              /* Vietnamese stacked marks (ế, ộ, ữ) need room */
  --leading-snug: 1.3;
  --leading-tight: 1.12;
  --tracking-display: -0.025em;
  --tracking-number: -0.04em;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  --motion-feedback: var(--duration-150);           /* press, toggle; also the only motion kept under reduced motion */
  --motion-state: var(--duration-250);              /* hover, sheet close */
  --motion-arrive: var(--duration-300);             /* a new tile or row slides in */
  --motion-open: var(--duration-350);               /* detail sheet opens */
  --motion-count: var(--duration-600);              /* numbers count, ring draws */

}

/* ---------- 3. component ---------- */
:root{
  --page-max: 1480px;
  --player-max: 1040px;   /* the stream player's frame: a 16:9 video at 960 wide, with the frame's gutters */
  --page-pad: var(--space-32);
  --grid-gap: var(--space-24);
  --tile-bg: var(--color-surface);
  --tile-radius: var(--radius-24);
  --tile-pad: var(--space-32);
  --tile-pad-hero: var(--space-48);
  --tile-hover-lift: -3px;
  --inner-radius: var(--radius-12);                  /* tile radius minus the visual inset */
  --num-hero: clamp(var(--size-56), 2rem + 4.6vw, 8rem);   /* keynote: the lead's measured number */
  --num-xl: clamp(var(--size-40), 1.4rem + 2.2vw, var(--size-88));
  --num-lg: var(--size-56);
  --num-md: var(--size-32);
  --num-count: var(--size-112);                      /* "Sắp diễn ra": the days left, the card's one large thing */
  --num-count-dense: var(--size-76);
  --av-xs: 20px; --av-sm: 28px; --av-md: 40px; --av-lg: 56px; --av-xl: 72px;
  --av-radius: 28%;                                  /* a squircle, like an app icon: logos read as objects */
  --av-text-xs: var(--size-12); --av-text-sm: var(--size-12); --av-text-md: 0.9rem; --av-text-lg: 1.15rem; --av-text-xl: 1.4rem;   /* monogram letters per avatar size: floor at 12px */
  --datebadge-text: var(--size-12);                          /* month label: floor at 12px */
  --tab-badge-text: var(--size-12);                         /* tab count: floor at 12px */
  --nav-fade: linear-gradient(to right, #000 calc(100% - 32px), transparent);   /* alpha mask: the top nav fades out where it scrolls */
  --ring-size: 112px; --ring-stroke: 10px;
  --chip-h: 32px;
  --btn-h: 44px;
  --focus-ring: 3px solid var(--color-accent);
  --focus-offset: 3px;
  --bar-h: 64px;
  --sheet-w: min(520px, 100vw);

  /* The MSN-style front page (Mẫu A, captain 08/11 18:23): one panel under the search, a bento of fixed rows where a
     notable story takes 2x2 or 2x1 cells. Sizes are the mockup's (plans/reports/trang-msn/mau-a2-msn-sat.html). */
  --msn-hair: 1px;                                   /* a list's dividers, the high-contrast dock edge; no card or panel border */
  --msn-tight: 2px;                                  /* the tightest gap: tabs, a tile's inner inset */
  --msn-gap: var(--space-12);
  --msn-cols: 5;
  --msn-row1: 384px;                                 /* the first row: lead, weather, calendar, "Chuyện lớn" */
  --msn-rowh: 286px;                                 /* every other row */
  --msn-photo-h: 148px;
  --msn-card-r: var(--radius-12);
  --msn-panel-r: 16px;
  --msn-panel-pad: var(--space-12);
  --msn-search-h: 52px;
  --msn-search-max: 680px;
  --msn-fav: 20px;                                   /* the source's mark beside its name */
  --msn-fav-lg: 28px;
  --msn-dot: 3px;
  --msn-tab-line: 3px;                               /* the active section's underline */
  /* The pager dots: one look for every row of dots (the lead carousel's, the weather card's), close together, straight
     on the picture (captain, 10/11 18:54: "bỏ viền đi ... các dấu chấm ... phải đồng bộ với nhau"). */
  --pager-dot: var(--space-8); --pager-dot-on: var(--space-24);
  --pager-dot-pad: var(--space-4);                   /* half the space between two dots, inside each dot's button */
  --seg-thumb-r: calc(var(--radius-8) - var(--msn-tight));   /* a segmented control's chosen side, inside its track */
  --msn-title: var(--text-sub);                      /* 15 px: a card's headline */
  --msn-title-text: var(--text-title);               /* 18 px: a headline without a picture */
  --msn-title-wide: var(--text-title);
  --msn-title-big: 1.375rem;                         /* 22 px */
  --msn-title-ink-big: 1.875rem;                     /* 30 px: a big card without a picture */
  --msn-slide-title: 1.25rem;                        /* 20 px */
  --msn-cal-day: 7rem;                               /* 112 px */
  --msn-cal-day-fluid: 48cqi;                        /* the big day follows the calendar card's width, 60 to 112 px */
  --msn-wx-temp: 2.875rem;                           /* 46 px */
  --msn-wx-icon: 46px; --msn-wx-icon-sm: 28px;
  --msn-wx-menu-w: 210px;
  --msn-blur: 14px;
  /* Elevation instead of a border (captain, 08/11 21:08): the panel floats on the page, a card rests on the panel. */
  --msn-shadow-panel: 0 1px 3px oklch(var(--shadow-tint) / 0.05), 0 12px 40px oklch(var(--shadow-tint) / 0.07);
  --msn-shadow-rest: 0 1px 2px oklch(var(--shadow-tint) / 0.08), 0 4px 16px oklch(var(--shadow-tint) / 0.10);   /* a card at rest: soft depth on the tinted panel */
  --msn-shadow-card: 0 2px 4px oklch(var(--shadow-tint) / 0.06), 0 10px 28px oklch(var(--shadow-tint) / 0.12);
  --msn-ink-card: var(--brand-ink);                  /* a notable story without a picture, and the lead's frame */
  --msn-on-ink: var(--brand-white);
  --msn-on-ink-2: var(--gray-90);
  --msn-slide-box: color-mix(in srgb, var(--brand-ink) 90%, transparent);
  --pager-dot-fill: color-mix(in srgb, var(--brand-white) 72%, transparent);
  --pager-dot-fill-on: var(--brand-white);
  --pager-dot-shadow: 0 1px 2px color-mix(in srgb, var(--brand-ink) 40%, transparent), 0 0 6px color-mix(in srgb, var(--brand-ink) 35%, transparent);   /* a soft shadow, no ring and no chip: it reads on a white photo and a dark one */
  /* The weather card: a sky photograph (anh/bau-troi.jpg), a flat ink veil, frosted tiles; white text 4.7:1 or more. */
  --msn-wx-sky: #2B4C7A;                             /* shown until the photograph arrives */
  --msn-wx-veil: color-mix(in srgb, var(--brand-ink) 16%, transparent);
  --msn-wx-tile: color-mix(in srgb, var(--brand-ink) 16%, transparent);
  --msn-wx-tile-on: color-mix(in srgb, var(--brand-white) 15%, transparent);
  --msn-wx-hover: color-mix(in srgb, var(--brand-white) 12%, transparent);
  --msn-wx-pill: color-mix(in srgb, var(--brand-ink) 24%, transparent);
  --msn-wx-pill-hover: color-mix(in srgb, var(--brand-ink) 40%, transparent);
  --msn-wx-solid: color-mix(in srgb, var(--brand-ink) 65%, transparent);   /* reduced transparency */
  --msn-wx-shadow: 0 1px 2px color-mix(in srgb, var(--brand-ink) 35%, transparent);
  --msn-sun: #FDB022; --msn-cloud: var(--gray-96); --msn-cloud-2: var(--gray-80); --msn-rain: #84CAFF; --msn-moon: #FEF0C7;
  --msn-page-pad: clamp(16px, 2.2vw, 40px);
  --msn-top-pad: 20px;
  --msn-panel-max: 1624px;                          /* the panel's outer width stops here and is centred (content 1600 px, captain 10/11 17:51); the top row shares its edges */
  /* The front page's bands (captain, 10/11 17:51: "Duyệt, giao sửa"): at most five columns, every card in a row the
     band's height. --bento-cols is set per width in trang-msn.css (5, 4, 3, and 1 on a phone); feed.js reads it. */
  --bento-cols: 5;
  --band-gap: var(--space-24);                       /* between two bands */
  --band-h-top: 384px;                               /* "Hôm nay" and "Điểm nhấn": the lead, the lists, the weather, the calendar */
  --band-h-news: 286px;                              /* a row of story cards: "Tin mới", "Tin khác" */
  --band-h-lab: 432px;                               /* "Mô hình và mã nguồn": three equal tiles */
  --bento-thumb-w: 104px; --bento-thumb-h: 78px;     /* a phone's compact story card: the picture beside the headline */
  --msn-brand-tile: 34px; --msn-brand-size: 1.375rem;
  --msn-rowh-xl: 292px; --msn-photo-h-xl: 154px;   /* 1750 px and wider: seven columns */
  --msn-rowh-phone: 240px; --msn-photo-h-phone: 112px;
  --msn-lead-h-phone: 270px; --msn-big-h-phone: 380px; --msn-wide-h-phone: 220px; --msn-wx-h-phone: 372px;
  --msn-cal-day-phone: 3.75rem;
  /* The calendar as a page of a Vietnamese tear-off calendar (captain, 08/11 21:08: "Đưa con giáp tháng hoặc ngày, làm
     nền cho card lịch ... giống phong cách lịch phương đông"): the band, the lunar day, the day's animal as the page's art. */
  --msn-cal-moon: 2.5rem;                            /* 40 px: the lunar day */
  --msn-cal-moon-phone: 1.75rem;
  --msn-cal-art-w: 100%;                             /* the animal's box, as wide as the card */
  --msn-menu-top: 52px; --msn-menu-max-h: 290px;
  --msn-spinner: 14px; --msn-spinner-w: 2px;
  --msn-sk-line: 12px;
  /* The day's picture behind the first screen, from 768 px (owner, 10/11: "còn về ảnh nền thì em làm như edge"; nen.js).
     Captain, 10/11 14:48 ("đưa nút tìm kiếm và nội dung cao lên trên"; "giữa nền và nội dung để 1 lớp phủ"): the search
     sits at the top and the panel right under it, as on Edge; a veil covers the whole picture and darkens along the top
     edge, where the corners' white ink sits. "Tùy chỉnh" (thanh-tren.js) can start the panel lower: part or head. */
  --top-pad: var(--space-16);                        /* the top row's distance from the window's top edge */
  --top-side: 15rem;                                 /* each corner's column at 1100 px and wider; the search takes the rest */
  --top-side-narrow: 8.5rem;                         /* 768 to 1099 px: the corner's two short lines */
  --top-ink: var(--color-ink);                       /* the corners on the page's own surface... */
  --top-ink-shadow: none;
  --top-tile: transparent;
  --top-tile-on: var(--color-fill);
  --top-on-nen-ink: var(--brand-white);              /* ...and on the picture, under the veil */
  --top-on-nen-shadow: 0 1px 2px oklch(0.1 0.02 262 / 0.55);
  --top-on-nen-tile: color-mix(in srgb, var(--nen-mat) 52%, transparent);
  --top-on-nen-tile-on: color-mix(in srgb, var(--nen-mat) 72%, transparent);
  --top-wx-icon: 24px;
  --top-icon: 22px;                                  /* the tune mark in the Tùy chỉnh tile */
  --nen-fold: clamp(320px, 52vh, 640px);             /* "Một phần": the panel starts a little under the middle */
  --nen-peek: 88px;                                  /* "Đầu đề": only the panel's head row shows above the fold */
  --nen-mat: #0B101C;                                /* the renders' night: shown until the day's picture arrives */
  --nen-focus: 50% 32%;                              /* the renders keep their detail in the upper thirds */
  --nen-scrim: linear-gradient(to bottom, oklch(0.12 0.02 262 / 0.72), oklch(0.12 0.02 262 / 0.62) 72px, oklch(0.12 0.02 262 / 0.32) 148px, oklch(0.12 0.02 262 / 0.3));
  --nen-pill: color-mix(in srgb, var(--color-float) 94%, transparent);
  --nen-pill-on: var(--color-float);
  --nen-pill-shadow: 0 1px 2px oklch(0.1 0.02 262 / 0.22), 0 8px 28px oklch(0.1 0.02 262 / 0.28);
  /* One row of any list (captain, 10/11 15:19: "yêu cầu tất cả kiểu hover của list nó phải giống nhau"): a wash behind
     the whole row on hover and on keyboard focus, reaching this far past the row's own box. */
  --row-wash: var(--color-fill);
  --row-wash-x: var(--space-8);
  --row-wash-y: var(--space-6);
  /* The models and code band on the "Mã và mô hình" view: tiles at least this wide. */
  --band-tile-min: 20rem;
  /* "Tùy chỉnh": the panel at the top right, out of the top row's own button. */
  --tc-w: 22rem;
  --tc-shadow: 0 2px 6px oklch(var(--shadow-tint) / 0.12), 0 18px 48px oklch(var(--shadow-tint) / 0.22);
  --tc-switch-w: 44px; --tc-switch-h: 26px; --tc-knob: 20px;
  --tc-switch-off: color-mix(in srgb, var(--color-ink) 45%, transparent);
  /* "Vừa đăng" after the "N tin mới" pill (owner, 10/11): the announced rows glow coral, then settle. */
  --fresh-flash: 2000ms;
  --color-accent-wash-strong: color-mix(in srgb, var(--brand-signature) 22%, transparent);
}

/* ---------- dark: same roles, new values. Surfaces lighten to rise; numbers stay the brightest thing. ---------- */
[data-theme="dark"]{
  --color-canvas: var(--brand-surface-dark);
  --color-bar: var(--brand-surface-dark);
  --color-surface: var(--brand-card-dark);
  --color-inset: var(--brand-surface-dark);
  --color-fill: var(--deep-33);
  --color-hair: var(--deep-38);
  --color-card-edge: transparent;
  --color-ink: var(--brand-surface);
  --color-ink-2: var(--gray-80);
  --color-ink-3: var(--gray-70);
  --color-heading: var(--brand-surface);
  --color-accent: var(--coral-light);
  --color-accent-hover: color-mix(in oklch, var(--coral-light) 60%, var(--brand-surface));
  --color-accent-fill: var(--brand-signature);
  --color-accent-fill-hover: var(--coral-light);
  --color-on-accent: var(--brand-ink);
  --color-on-accent-hover: var(--brand-ink);
  --color-tech: var(--brand-tech);
  --color-chart: var(--brand-tech);
  --show-logo-light: none;                         /* the kit's dark variant: coral letters, Surface beak */
  --show-logo-dark: block;
  --color-accent-wash: color-mix(in srgb, var(--brand-signature) 16%, transparent);
  --color-link: var(--coral-light);
  --color-hair-strong: oklch(0.48 0.035 262);
  --color-mark: color-mix(in srgb, var(--brand-signature) 30%, transparent);
  --color-up: var(--brand-tech);
  --color-live: var(--coral-light);
  --color-live-wash: color-mix(in srgb, var(--brand-signature) 18%, transparent);
  --color-live-fill: var(--coral-breaking);
  --color-mt-ink: var(--color-ink-2);
  --color-mt-bg: var(--color-fill);
  --color-panel: var(--deep-24);
  --color-panel-front: var(--deep-24);               /* one step darker than a card */
  --color-seg-track: var(--deep-33);
  --color-seg-thumb: var(--deep-38);
  --color-float: var(--deep-33);
  --color-field: var(--deep-33);
  --color-field-on: var(--deep-38);
  --color-art-wash: color-mix(in srgb, var(--brand-signature) 12%, transparent);
  --color-ok: var(--brand-tech);
  --color-ok-wash: color-mix(in srgb, var(--brand-tech) 16%, transparent);
  --color-warn: var(--amber-80);
  --color-warn-wash: oklch(0.82 0.12 75 / 0.14);
  --color-scrim: oklch(0.05 0.004 var(--hue) / 0.55);
  --shadow-tint: 0.05 0.01 var(--hue);
  --av-mono-bg: 0.32 0.05;
  --av-mono-ink: 0.92 0.04;
  --shadow-lift: 0 1px 2px oklch(var(--shadow-tint) / 0.4), 0 16px 40px oklch(var(--shadow-tint) / 0.5);
  --shadow-sheet: 0 2px 6px oklch(var(--shadow-tint) / 0.4), 0 32px 80px oklch(var(--shadow-tint) / 0.6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-canvas: var(--brand-surface-dark);
    --color-bar: var(--brand-surface-dark);
    --color-surface: var(--brand-card-dark);
    --color-inset: var(--brand-surface-dark);
    --color-fill: var(--deep-33);
    --color-hair: var(--deep-38);
    --color-card-edge: transparent;
    --color-ink: var(--brand-surface);
    --color-ink-2: var(--gray-80);
    --color-ink-3: var(--gray-70);
    --color-heading: var(--brand-surface);
    --color-accent: var(--coral-light);
    --color-accent-hover: color-mix(in oklch, var(--coral-light) 60%, var(--brand-surface));
    --color-accent-fill: var(--brand-signature);
    --color-accent-fill-hover: var(--coral-light);
    --color-on-accent: var(--brand-ink);
    --color-on-accent-hover: var(--brand-ink);
    --color-tech: var(--brand-tech);
    --color-chart: var(--brand-tech);
    --show-logo-light: none;                       /* the kit's dark variant: coral letters, Surface beak */
    --show-logo-dark: block;
    --color-accent-wash: color-mix(in srgb, var(--brand-signature) 16%, transparent);
  --color-link: var(--coral-light);
  --color-hair-strong: oklch(0.48 0.035 262);
  --color-mark: color-mix(in srgb, var(--brand-signature) 30%, transparent);
  --color-up: var(--brand-tech);
    --color-live: var(--coral-light);
    --color-live-wash: color-mix(in srgb, var(--brand-signature) 18%, transparent);
    --color-live-fill: var(--coral-breaking);
    --color-mt-ink: var(--color-ink-2);
    --color-mt-bg: var(--color-fill);
    --color-panel: var(--deep-24);
    --color-panel-front: var(--deep-24);
    --color-seg-track: var(--deep-33);
    --color-seg-thumb: var(--deep-38);
    --color-float: var(--deep-33);
    --color-field: var(--deep-33);
    --color-field-on: var(--deep-38);
    --color-art-wash: color-mix(in srgb, var(--brand-signature) 12%, transparent);
    --color-ok: var(--brand-tech);
    --color-ok-wash: color-mix(in srgb, var(--brand-tech) 16%, transparent);
    --color-warn: var(--amber-80);
    --color-warn-wash: oklch(0.82 0.12 75 / 0.14);
    --color-scrim: oklch(0.05 0.004 var(--hue) / 0.55);
    --shadow-tint: 0.05 0.01 var(--hue);
    --av-mono-bg: 0.32 0.05;
    --av-mono-ink: 0.92 0.04;
    --shadow-lift: 0 1px 2px oklch(var(--shadow-tint) / 0.4), 0 16px 40px oklch(var(--shadow-tint) / 0.5);
    --shadow-sheet: 0 2px 6px oklch(var(--shadow-tint) / 0.4), 0 32px 80px oklch(var(--shadow-tint) / 0.6);
    color-scheme: dark;
  }
}

@media (max-width: 767px){
  :root{ --page-pad: var(--space-16); --grid-gap: var(--space-12); --tile-pad: var(--space-24); --tile-pad-hero: var(--space-24); --bar-h: 56px; }
}