/* =====================================================================
   ChannelSite design tokens — drop-in for the cabinet (v0.6 restyle, 30 Sep 2026)
   v0.6: the cabinet uses the EDITORIAL newspaper look of the landing (editorial/):
   paper #FBFAF7, ink #111, one accent #D6391F, thin rules, square-ish ink buttons,
   Noto Serif Display headings, Source Serif 4 text, Inter Tight UI, Noto Naskh Arabic.
   Token NAMES are unchanged since v0.4 (e.g. --cs-raw-gold now holds ink): existing markup
   and components restyle without HTML changes. v0.2–v0.5 values: /tmp/cabinet-restyle-bak/tokens.css.

   Layers (read top → bottom):
     0. Fonts (@font-face, self-hosted woff2 in ./fonts/, OFL)
     1. Brand + product tokens (rename the product HERE only)
     2. Raw palette (light)            --cs-raw-*
     3. Raw palette (dark)             → see DARK THEME at the end (self-contained)
     4. Semantic tokens                --cs-*   ← components use ONLY these
        Semantic tokens read Telegram Mini App theme vars first
        (--tg-theme-*, injected by telegram-web-app.js), then fall back to raw.
     5. Type, radius, spacing, motion, layout
     6. Arabic / RTL font stack
     7. Editorial landing palette (light)  --ed-*
     DARK THEME (self-contained): dark values for 2 and 7 + the logo swap
   All contrast ratios are listed in SPEC.md → "Contrast (WCAG AA)".
   ===================================================================== */

/* 0 ─ Fonts (v0.6). Files: ./fonts/*.woff2 next to this file (copied from editorial/fonts, SIL OFL 1.1; licences in ./fonts/OFL-*.txt).
   Private family names (yt-*) so these faces never collide with the landing's own fonts.css. If the files are missing,
   every stack below falls back to Georgia / Helvetica / system Arabic: the layout still works. */
/* Noto Serif Display normal latin-ext */ @font-face { font-family: 'yt-display'; font-style: normal; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; src: url('fonts/NotoSerifDisplay-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Noto Serif Display normal latin */ @font-face { font-family: 'yt-display'; font-style: normal; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; src: url('fonts/NotoSerifDisplay-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Source Serif 4 italic latin */ @font-face { font-family: 'yt-text'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('fonts/SourceSerif4-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Source Serif 4 normal latin-ext */ @font-face { font-family: 'yt-text'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('fonts/SourceSerif4-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Source Serif 4 normal latin */ @font-face { font-family: 'yt-text'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('fonts/SourceSerif4-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Inter Tight normal latin-ext */ @font-face { font-family: 'yt-ui'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/InterTight-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Inter Tight normal latin */ @font-face { font-family: 'yt-ui'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/InterTight-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* launch-review fix P1-C1 (30 Sep): Cyrillic subsets (same OFL files as static/css/site/fonts/) */
@font-face { font-family: 'yt-display'; font-style: normal; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; src: url('fonts/NotoSerifDisplay-normal-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'yt-display'; font-style: normal; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; src: url('fonts/NotoSerifDisplay-normal-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'yt-text'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('fonts/SourceSerif4-normal-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'yt-text'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('fonts/SourceSerif4-normal-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'yt-text'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('fonts/SourceSerif4-italic-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'yt-ui'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/InterTight-normal-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'yt-ui'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/InterTight-normal-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* Noto Naskh Arabic normal arabic */ @font-face { font-family: 'yt-naskh'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/NotoNaskhArabic-normal-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }

:root {
  /* 1 ─ Brand: yourtimes.app (historical: renamed from the old name "thetimes.app" on 30 Sep 2026). Rendered by [data-brand]:empty::before
         and read by design.js for <title> and the demo watermark. */
  --cs-brand-name: "yourtimes.app";
  --cs-bot-username: "yourtimes_app_bot"; /* bot username (no "@"). Rendered by [data-bot]:empty::before; deep links t.me/yourtimes_app_bot */
  --cs-bot-name: "yourtimes.app";        /* bot display name in Telegram (profile photo: brand/icon-512.png) */
  --cs-bot-suffix: "";                   /* empty: the bot is real, no suffix */

  /* 2 ─ Raw palette, light (v0.6 editorial: same values as --ed-* in section 7). Names kept from v0.4; the old
         meaning is in brackets. "gold" = the primary action colour, which is now solid ink. */
  --cs-raw-bg: #FBFAF7;          /* paper (= --ed-paper) */
  --cs-raw-bg-alt: #F3F1EC;      /* inset: code, wireframes, pressed rows */
  --cs-raw-surface: #FBFAF7;     /* sections sit on the paper: no card fill */
  --cs-raw-field: #FFFFFF;       /* NEW v0.6: form fields, copy field (= --ed-paper-2) */
  --cs-raw-ink: #111111;         /* 18.1:1 on paper */
  --cs-raw-ink-2: #3D3B38;       /* 10.9:1 */
  --cs-raw-hint: #5E5B56;        /* 6.4:1 on paper, 6.0:1 on inset */
  --cs-raw-placeholder: #5E5B56;
  --cs-raw-rule: #CFCBC3;        /* hairline between rows and columns (decorative) */
  --cs-raw-rule-strong: #111111; /* 1px/3px ink rules, field and button borders */
  --cs-raw-link: #111111;        /* links are ink + underline, as on the landing */
  --cs-raw-gold: #111111;        /* [gold] primary button = solid ink */
  --cs-raw-gold-hover: #333333;
  --cs-raw-on-gold: #FBFAF7;     /* 18.1:1 on ink */
  --cs-raw-gold-soft: #F3F1EC;   /* [gold tint] neutral inset, no cream */
  --cs-raw-gold-ink: #111111;    /* [gold text] ink */
  --cs-raw-kicker: #3D3B38;      /* [kicker] no longer an uppercase eyebrow */
  --cs-raw-accent: #D6391F;      /* NEW v0.6: the single accent (rules, current step, focus, highlight). UI 4.5:1 */
  --cs-raw-accent-text: #BC321B; /* NEW v0.6: accent used as text (flags, numerals) 5.6:1 */
  --cs-raw-tg: #111111;          /* Telegram actions are ink buttons too (Telegram blue stays inside the Mini App) */
  --cs-raw-tg-hover: #333333;
  --cs-raw-on-tg: #FBFAF7;
  --cs-raw-success: #111111;     /* success = plain ink; the editorial page has no green */
  --cs-raw-success-soft: transparent;
  --cs-raw-warn: #BC321B;        /* warnings use the accent text colour */
  --cs-raw-warn-soft: transparent;
  --cs-raw-danger: #BC321B;
  --cs-raw-danger-soft: transparent;
  --cs-raw-scrim: rgba(17, 17, 17, .55);
  --cs-raw-shadow: none;         /* no shadows */
  --cs-raw-shadow-lg: none;
  --cs-raw-bar-bg: #111111;      /* demo bar: an ink band */
  --cs-raw-bar-ink: #FBFAF7;     /* 18.1:1 */
  --cs-raw-bar-hint: #CFCBC3;    /* 11.7:1 */
  --cs-raw-seg-save: #E2573D;    /* 'save 21%' on the selected (ink) segment: 5.1:1 */
  color-scheme: light;
}

/* 3 ─ Raw palette, dark: moved to the self-contained "DARK THEME" section at the end of this file (v0.5). */

:root {
  /* 4 ─ Semantic tokens. Telegram Mini App vars win when present (inside Telegram only). */
  --cs-bg:        var(--tg-theme-secondary-bg-color, var(--cs-raw-bg));   /* page background   */
  --cs-surface:   var(--tg-theme-bg-color, var(--cs-raw-surface));        /* cards, sheets      */
  --cs-surface-2: var(--tg-theme-secondary-bg-color, var(--cs-raw-bg-alt)); /* insets, code, chips */
  --cs-text:      var(--tg-theme-text-color, var(--cs-raw-ink));
  --cs-text-2:    var(--tg-theme-text-color, var(--cs-raw-ink-2));
  --cs-hint:      var(--tg-theme-hint-color, var(--cs-raw-hint));
  --cs-placeholder: var(--tg-theme-hint-color, var(--cs-raw-placeholder));
  --cs-link:      var(--tg-theme-link-color, var(--cs-raw-link));
  --cs-rule:      var(--tg-theme-section-separator-color, var(--cs-raw-rule));
  --cs-rule-strong: var(--cs-raw-rule-strong);
  --cs-primary:        var(--tg-theme-button-color, var(--cs-raw-gold));
  --cs-primary-hover:  var(--tg-theme-button-color, var(--cs-raw-gold-hover));
  --cs-on-primary:     var(--tg-theme-button-text-color, var(--cs-raw-on-gold));
  --cs-accent-soft: var(--cs-raw-gold-soft);
  --cs-accent-ink:  var(--cs-raw-gold-ink);
  --cs-accent:      var(--tg-theme-accent-text-color, var(--cs-raw-accent));      /* v0.6 */
  --cs-accent-text: var(--tg-theme-accent-text-color, var(--cs-raw-accent-text)); /* v0.6 */
  --cs-field:       var(--tg-theme-bg-color, var(--cs-raw-field));                /* v0.6 */
  --cs-kicker:    var(--tg-theme-accent-text-color, var(--cs-raw-kicker));
  --cs-tg:        var(--cs-raw-tg);
  --cs-tg-hover:  var(--cs-raw-tg-hover);
  --cs-on-tg:     var(--cs-raw-on-tg);
  --cs-tg-brand:  var(--cs-raw-tg);   /* Telegram blue retired; decoration follows the ink */
  --cs-success: var(--cs-raw-success);  --cs-success-soft: var(--cs-raw-success-soft);
  --cs-warn:    var(--cs-raw-warn);     --cs-warn-soft:    var(--cs-raw-warn-soft);
  --cs-danger:  var(--tg-theme-destructive-text-color, var(--cs-raw-danger)); --cs-danger-soft: var(--cs-raw-danger-soft);
  --cs-focus:   var(--cs-accent);   /* v0.6: accent focus ring (4.5:1 on paper) */
  --cs-scrim:   var(--cs-raw-scrim);
  --cs-shadow:  var(--cs-raw-shadow);
  --cs-shadow-lg: var(--cs-raw-shadow-lg);
  --cs-bar-bg:  var(--cs-raw-bar-bg);
  --cs-bar-ink: var(--cs-raw-bar-ink);
  --cs-bar-hint: var(--cs-raw-bar-hint);
  --cs-seg-save: var(--cs-raw-seg-save);

  /* 5 ─ Type (v0.6 editorial stacks; self-hosted, see section 0) */
  --cs-font-serif: 'yt-display', 'Noto Serif Display', 'Bodoni 72', Didot, Georgia, serif;          /* headings */
  --cs-font-text: 'yt-text', 'Source Serif 4', 'Iowan Old Style', Georgia, serif;                  /* NEW v0.6: reading text */
  --cs-font-sans: 'yt-ui', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;                     /* UI: buttons, labels, facts */
  --cs-display-stretch: 80%;     /* NEW v0.6: Noto Serif Display width for headings */
  --cs-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --cs-fs-xs: 13px;   /* legal / meta only, never for instructions */
  --cs-fs-sm: 14px;
  --cs-fs-md: 16px;   /* body in the cabinet (landing uses 17px for marketing copy) */
  --cs-fs-lg: 18px;
  --cs-fs-xl: 22px;
  --cs-fs-2xl: 28px;
  --cs-fs-3xl: clamp(40px, 9vw, 52px); /* price figure */
  --cs-lh: 1.5;
  --cs-lh-tight: 1.2;

  /* Radius (v0.6: square-ish; sections are ruled, not rounded) / spacing / touch */
  --cs-r-sm: 2px;    /* buttons, fields, keys */
  --cs-r-md: 2px;
  --cs-r-lg: 0;
  --cs-r-xl: 0;
  --cs-r-pill: 0;    /* no pills */
  --cs-sp-1: 4px; --cs-sp-2: 8px; --cs-sp-3: 12px; --cs-sp-4: 16px; --cs-sp-5: 20px; --cs-sp-6: 24px; --cs-sp-8: 32px; --cs-sp-10: 40px;
  --cs-touch: 44px;         /* minimum hit area (WCAG 2.5.5 / Apple HIG) */
  --cs-btn-h: 48px;         /* landing .btn height */
  --cs-btn-h-lg: 52px;
  --cs-ring: 0 0 0 2px var(--cs-focus);

  /* Layout */
  --cs-max: 1160px;         /* landing --max */
  --cs-max-narrow: 720px;   /* cabinet column */
  --cs-gutter: 16px;
  --cs-z-bar: 40; --cs-z-sheet: 60; --cs-z-toast: 70;

  /* Safe areas: browser env() + Telegram Mini App (Bot API 8.0+) vars, whichever is larger */
  --cs-safe-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --cs-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --cs-safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px));
  --cs-safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px));
  /* Viewport height: Telegram's stable height inside the Mini App, dynamic vh on the web */
  --cs-vh: var(--tg-viewport-stable-height, 100dvh);

  /* Motion */
  --cs-ease: cubic-bezier(.2, .7, .2, 1);
  --cs-dur: .18s;
}
@media (min-width: 768px) { :root { --cs-gutter: 24px; } }

/* 6 ─ Arabic / RTL: Noto Naskh Arabic (as on the landing); Latin runs inside fall through to the editorial faces. Latin digits are kept (see .cs-num). */
:root:lang(ar), [dir="rtl"] {
  --cs-font-sans: 'yt-naskh', 'Noto Naskh Arabic', 'yt-ui', 'Geeza Pro', sans-serif;
  --cs-font-text: 'yt-naskh', 'Noto Naskh Arabic', 'yt-text', 'Geeza Pro', serif;
  --cs-font-serif: 'yt-naskh', 'Noto Naskh Arabic', 'yt-display', 'Geeza Pro', serif;
  --cs-display-stretch: 100%;
  --cs-lh: 1.7;
}

@media (prefers-reduced-motion: reduce) { :root { --cs-dur: 0s; } }

/* =====================================================================
   7 ─ Editorial landing palette  --ed-*   (v0.5: default landing, light + dark)
   Additive: the --cs-* contract above is unchanged. Used by editorial/editorial.css.
   Dark = "newsprint at night": warm near-black paper, off-white ink, thin rules,
   the vermilion accent lifted for AA. No gradients, glows, gold, #000 or #fff.
   Theme selection (same attribute as the cabinet kit):
     no attribute          → follows prefers-color-scheme
     [data-theme="dark"]   → dark   (the user picked it; saved in localStorage "yourtimes-theme")
     [data-theme="light"]  → light  (overrides a dark system setting)
   Ratios: SPEC.md → "Contrast", DARK_THEME.md; generated by tools/contrast.py.
   ===================================================================== */
:root {
  --ed-brand-accent: #D6391F;   /* logo dot + brand. Never changes with the theme */
  --ed-paper: #FBFAF7;          /* page */
  --ed-paper-2: #FFFFFF;        /* form fields */
  --ed-ink: #111111;            /* text, strong rules, buttons           18.1:1 */
  --ed-ink-2: #3D3B38;          /* secondary text                         10.9:1 */
  --ed-ink-3: #5E5B56;          /* captions, small print, placeholders    6.4:1 */
  --ed-rule: #111111;           /* 3px/1px rules */
  --ed-hair: #CFCBC3;           /* hairlines between rows and columns (decorative) */
  --ed-frame: #BDB7AC;          /* block edges: chips, boxed elements, column rules (BORDERS p1) 1.91:1 */
  --ed-accent: #D6391F;         /* rules, focus ring, quote mark (UI ≥3:1)  4.5:1 */
  --ed-accent-text: #BC321B;    /* accent used as text (story numbers)      5.6:1 */
  --ed-btn-bg: #111111;
  --ed-btn-fg: #FBFAF7;
  --ed-field-border: #111111;
  --ed-flag-bg: #111111;        /* "On top" flag */
  --ed-flag-fg: #FBFAF7;
  --ed-select-bg: #F6D5CC;      /* ::selection */
  --ed-photo-filter: none;      /* screenshots / example-site "photos" */
  --ed-photo-frame: #111111;    /* 1px frame around them */
  --ed-photo-mat: transparent;  /* outer hairline (dark only) */
  --ed-theme-color: #FBFAF7;    /* <meta name="theme-color"> */
}

/* #####################################################################
   DARK THEME · self-contained section (v0.5). Copy this whole block to ship dark on its own.
   It only overrides raw values, so it works with the CURRENT production cabinet markup and
   components (cs_platform/cabinet: index.html, components.css v0.4) as well as the v0.5 screens.
   Needs: section 2 (cabinet raw light) and, for the landing, section 7 (--ed-* light) above it.
   Selection:  no data-theme → follows prefers-color-scheme · [data-theme="dark"] · [data-theme="light"].
   In the Mini App, app.js sets data-theme from Telegram.WebApp.colorScheme (unchanged).
   The two blocks per palette must stay identical (tools/contrast.py asserts it for --ed-*).
   ##################################################################### */

/* D1 ─ Cabinet kit, dark raw palette. v0.6: aligned with D2 "newsprint at night" (same paper, ink, rules, accent, button);
   v0.5 values (demo.css night) are in /tmp/cabinet-restyle-bak/tokens.css. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cs-raw-bg: #17140F; --cs-raw-bg-alt: #201C16; --cs-raw-surface: #17140F; --cs-raw-field: #201C16;
    --cs-raw-ink: #EAE4D8; --cs-raw-ink-2: #CDC5B6; --cs-raw-hint: #A69D8D; --cs-raw-placeholder: #A69D8D;
    --cs-raw-rule: #4A443B; --cs-raw-rule-strong: #CBC3B4;
    --cs-raw-link: #EAE4D8; --cs-raw-gold: #EAE4D8; --cs-raw-gold-hover: #F5F0E6; --cs-raw-on-gold: #17140F;
    --cs-raw-gold-soft: #201C16; --cs-raw-gold-ink: #EAE4D8; --cs-raw-kicker: #CDC5B6;
    --cs-raw-accent: #E2573D; --cs-raw-accent-text: #E2573D;
    --cs-raw-tg: #EAE4D8; --cs-raw-tg-hover: #F5F0E6; --cs-raw-on-tg: #17140F;
    --cs-raw-success: #EAE4D8; --cs-raw-success-soft: transparent;
    --cs-raw-warn: #E2573D; --cs-raw-warn-soft: transparent;
    --cs-raw-danger: #E2573D; --cs-raw-danger-soft: transparent;
    --cs-raw-scrim: rgba(0, 0, 0, .62);
    --cs-raw-shadow: none; --cs-raw-shadow-lg: none;
    --cs-raw-bar-bg: #201C16; --cs-raw-bar-ink: #EAE4D8; --cs-raw-bar-hint: #A69D8D;
    --cs-raw-seg-save: #A52A15;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --cs-raw-bg: #17140F; --cs-raw-bg-alt: #201C16; --cs-raw-surface: #17140F; --cs-raw-field: #201C16;
  --cs-raw-ink: #EAE4D8; --cs-raw-ink-2: #CDC5B6; --cs-raw-hint: #A69D8D; --cs-raw-placeholder: #A69D8D;
  --cs-raw-rule: #4A443B; --cs-raw-rule-strong: #CBC3B4;
  --cs-raw-link: #EAE4D8; --cs-raw-gold: #EAE4D8; --cs-raw-gold-hover: #F5F0E6; --cs-raw-on-gold: #17140F;
  --cs-raw-gold-soft: #201C16; --cs-raw-gold-ink: #EAE4D8; --cs-raw-kicker: #CDC5B6;
  --cs-raw-accent: #E2573D; --cs-raw-accent-text: #E2573D;
  --cs-raw-tg: #EAE4D8; --cs-raw-tg-hover: #F5F0E6; --cs-raw-on-tg: #17140F;
  --cs-raw-success: #EAE4D8; --cs-raw-success-soft: transparent;
  --cs-raw-warn: #E2573D; --cs-raw-warn-soft: transparent;
  --cs-raw-danger: #E2573D; --cs-raw-danger-soft: transparent;
  --cs-raw-scrim: rgba(0, 0, 0, .62);
  --cs-raw-shadow: none; --cs-raw-shadow-lg: none;
  --cs-raw-bar-bg: #201C16; --cs-raw-bar-ink: #EAE4D8; --cs-raw-bar-hint: #A69D8D;
  --cs-raw-seg-save: #A52A15;
  color-scheme: dark;
}

/* D2 ─ Editorial landing, dark "newsprint at night" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ed-paper: #17140F; --ed-paper-2: #201C16;
    --ed-ink: #EAE4D8; --ed-ink-2: #CDC5B6; --ed-ink-3: #A69D8D;
    --ed-rule: #CBC3B4; --ed-hair: #4A443B; --ed-frame: #5A544B;
    --ed-accent: #E2573D; --ed-accent-text: #E2573D;
    --ed-btn-bg: #EAE4D8; --ed-btn-fg: #17140F; --ed-field-border: #A69D8D;
    --ed-flag-bg: #CBC3B4; --ed-flag-fg: #17140F; --ed-select-bg: #5C2619;
    --ed-photo-filter: brightness(.86) saturate(.9); --ed-photo-frame: #736A5D; --ed-photo-mat: #3D372E;
    --ed-theme-color: #17140F;
  }
}
:root[data-theme="dark"] {
  --ed-paper: #17140F; --ed-paper-2: #201C16;
  --ed-ink: #EAE4D8; --ed-ink-2: #CDC5B6; --ed-ink-3: #A69D8D;
  --ed-rule: #CBC3B4; --ed-hair: #4A443B; --ed-frame: #5A544B;
  --ed-accent: #E2573D; --ed-accent-text: #E2573D;
  --ed-btn-bg: #EAE4D8; --ed-btn-fg: #17140F; --ed-field-border: #A69D8D;
  --ed-flag-bg: #CBC3B4; --ed-flag-fg: #17140F; --ed-select-bg: #5C2619;
  --ed-photo-filter: brightness(.86) saturate(.9); --ed-photo-frame: #736A5D; --ed-photo-mat: #3D372E;
  --ed-theme-color: #17140F;
}

/* D3 ─ Logo swap: ink wordmark on light, brand/logo-wordmark-white.svg on dark (paper #FBFAF7 + the same #D6391F dot;
   dot vs dark paper 3.9:1, graphic needs 3:1). Markup: two <img> inside the logo link, classes as in production:
   cabinet .cs-logo > .cs-logo-ink + .cs-logo-paper · landing .wordmark > .wm-ink + .wm-paper.
   (components.css v0.4 carries the same .cs-logo rules; either copy is enough, both are harmless.) */
.cs-logo .cs-logo-paper, .wordmark .wm-paper { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cs-logo .cs-logo-ink, :root:not([data-theme="light"]) .wordmark .wm-ink { display: none; }
  :root:not([data-theme="light"]) .cs-logo .cs-logo-paper, :root:not([data-theme="light"]) .wordmark .wm-paper { display: block; }
}
:root[data-theme="dark"] .cs-logo .cs-logo-ink, :root[data-theme="dark"] .wordmark .wm-ink { display: none; }
:root[data-theme="dark"] .cs-logo .cs-logo-paper, :root[data-theme="dark"] .wordmark .wm-paper { display: block; }
/* ###################### end DARK THEME ###################### */