/* -------------------------------------------------------------------------
 * designboom newsroom: DAAily hub design tokens.
 *
 * Everything above the "G15" marker is a VERBATIM copy of
 *   daaily-hr-hub/web/src/styles/tokens.css  (hub commit ed5d80d9)
 * Do not edit that part here. scripts/check-hub-tokens.sh diffs it against the hub checkout
 * and fails when they drift; when the hub changes, copy the file again and bump the commit.
 *
 * Below the marker: the G15 variables the hub keeps only in tailwind.config.js (spacing, radius,
 * shadow, motion, z-index, widths), and a resolved layer (--fg-c = rgb(var(--fg)) and so on) so
 * the newsroom's plain CSS and Chart.js reads can use a token as a color in one step.
 * Loaded AFTER the legacy :root blocks in public/index.html; the legacy names are aliased onto
 * these tokens there (docs/hub-migration/README.md).
 * ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * DAAily HR Hub design tokens (design system v1, Sep 2026).
 * Source of truth: the "DAAily HR Hub" design system artifact
 * (https://claude.ai/artifact/TYdfrJU6xuMTw97RpAMtBQ) and its brief.
 *
 * Values are RGB channels so Tailwind alpha modifiers work
 * (`bg-surface`, `text-fg-muted`, `border-line`, `bg-danger/10` …; see
 * tailwind.config.js). Light is the default; `[data-theme="dark"]` flips.
 *
 * Every screen is on these tokens (Sep 2026 cutover): the boot script in
 * index.html + design/theme.tsx set data-theme on <html>; System is the default.
 * Elements that must stay light in any theme (email previews, signature paper)
 * set data-theme="light" on themselves.
 * ------------------------------------------------------------------------- */

:root,
[data-theme="light"] {
  --bg: 250 250 249;
  --bg-sidebar: 244 244 242;
  --surface: 255 255 255;
  --surface-2: 245 245 244;
  --surface-3: 237 237 235;
  --line: 231 229 228;
  --line-strong: 214 211 209;
  --fg: 28 25 23;
  --fg-muted: 87 83 78;
  --fg-faint: 107 104 98;
  --primary: 28 25 23;
  --primary-fg: 255 255 255;
  --primary-hover: 53 48 44;
  --brand: 57 0 56;
  --brand-solid: 57 0 56;
  --brand-subtle: 245 237 245;
  --archdaily: 0 48 142;
  --archdaily-solid: 0 48 142;
  --archdaily-subtle: 230 236 247;
  --designboom: 107 101 0;
  --designboom-solid: 255 255 0;
  --designboom-on: 28 28 28;
  --designboom-subtle: 255 255 214;
  --link: 29 95 209;
  --ring: 29 95 209;
  --success: 6 118 71;
  --success-subtle: 236 253 243;
  --warning: 181 71 8;
  --warning-subtle: 255 250 235;
  --danger: 180 35 24;
  --danger-subtle: 254 243 242;
  --info: 23 92 211;
  --info-subtle: 239 248 255;
  /* InfoTip bubble: inverted against the page (ink bubble in light). */
  --tip-bg: 28 25 23;
  --tip-text: 255 255 255;
  --overlay: 28 25 23;
  --overlay-alpha: 0.4;
  --shadow-color: 28 25 23;

  --chart-1: 28 25 23;
  --chart-2: 142 58 138;
  --chart-3: 29 95 209;
  --chart-4: 14 147 132;
  --chart-5: 181 71 8;
  --chart-6: 122 90 248;
}

[data-theme="dark"] {
  --bg: 22 21 20;
  --bg-sidebar: 27 26 25;
  --surface: 31 30 28;
  --surface-2: 40 39 37;
  --surface-3: 48 47 44;
  --line: 46 45 42;
  --line-strong: 63 61 58;
  --fg: 237 237 236;
  --fg-muted: 168 166 161;
  --fg-faint: 149 146 140;
  --primary: 237 237 236;
  --primary-fg: 22 21 20;
  --primary-hover: 214 213 210;
  --brand: 213 155 209;
  --brand-solid: 126 47 122;
  --brand-subtle: 51 32 47;
  --archdaily: 143 176 255;
  --archdaily-solid: 0 48 142;
  --archdaily-subtle: 20 32 58;
  --designboom: 255 255 0;
  --designboom-solid: 255 255 0;
  --designboom-on: 28 28 28;
  --designboom-subtle: 51 50 10;
  --link: 108 168 255;
  --ring: 108 168 255;
  --success: 74 222 128;
  --success-subtle: 20 48 32;
  --warning: 251 191 36;
  --warning-subtle: 51 40 14;
  --danger: 249 112 102;
  --danger-subtle: 56 26 24;
  --info: 108 168 255;
  --info-subtle: 22 36 60;
  /* Inverted in dark: a light bubble. */
  --tip-bg: 237 237 236;
  --tip-text: 22 21 20;
  --overlay: 0 0 0;
  --overlay-alpha: 0.6;
  --shadow-color: 0 0 0;

  --chart-1: 237 237 236;
  --chart-2: 213 155 209;
  --chart-3: 108 168 255;
  --chart-4: 46 211 183;
  --chart-5: 251 191 36;
  --chart-6: 164 138 251;
}

/* Native controls and scrollbars follow the theme. */
:root, [data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* ===== G15: scale, radius, shadow, motion, z-index, widths ===================================
   The hub holds these in tailwind.config.js (audit section 4, G15). Same values, as variables,
   so a non-Tailwind consumer reads the same file. Proposed back to the hub unchanged. */
:root {
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  --duration-fast: 120ms;
  --duration-base: 200ms;

  --z-sticky: 10;
  --z-sidebar: 20;
  --z-header: 30;
  --z-dropdown: 40;
  --z-overlay: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-tooltip: 80;

  --sidebar-w: 240px;
  --sidebar-w-collapsed: 56px;
  --header-h: 56px;
  --page-max: 1440px;
  --content-max: 1200px;
  --form-max: 720px;
  --prose-max: 68ch;
}

/* Shadows read --shadow-color, which flips with the theme, so they are declared on [data-theme]
   as well and recompute inside a light island (an .ext-frame inside a dark page). */
:root, [data-theme] {
  --shadow-xs: 0 1px 2px 0 rgb(var(--shadow-color) / 0.05);
  --shadow-md: 0 4px 12px -2px rgb(var(--shadow-color) / 0.10), 0 2px 4px -2px rgb(var(--shadow-color) / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / 0.10), 0 4px 6px -4px rgb(var(--shadow-color) / 0.10);
}

/* ===== Resolved layer: every color token as a ready color =====================================
   `rgb(var(--fg))` is the hub way; `var(--fg-c)` is the same value in one step, for the legacy
   alias layer, inline styles and getComputedStyle() reads (Chart.js). Declared on [data-theme]
   too, so a light island recomputes them from its own channels. */
:root, [data-theme] {
  --bg-c: rgb(var(--bg));
  --bg-sidebar-c: rgb(var(--bg-sidebar));
  --surface-c: rgb(var(--surface));
  --surface-2-c: rgb(var(--surface-2));
  --surface-3-c: rgb(var(--surface-3));
  --line-c: rgb(var(--line));
  --line-strong-c: rgb(var(--line-strong));
  --fg-c: rgb(var(--fg));
  --fg-muted-c: rgb(var(--fg-muted));
  --fg-faint-c: rgb(var(--fg-faint));
  --primary-c: rgb(var(--primary));
  --primary-fg-c: rgb(var(--primary-fg));
  --primary-hover-c: rgb(var(--primary-hover));
  --brand-c: rgb(var(--brand));
  --brand-solid-c: rgb(var(--brand-solid));
  --brand-subtle-c: rgb(var(--brand-subtle));
  --archdaily-c: rgb(var(--archdaily));
  --archdaily-solid-c: rgb(var(--archdaily-solid));
  --archdaily-subtle-c: rgb(var(--archdaily-subtle));
  --designboom-c: rgb(var(--designboom));
  --designboom-solid-c: rgb(var(--designboom-solid));
  --designboom-on-c: rgb(var(--designboom-on));
  --designboom-subtle-c: rgb(var(--designboom-subtle));
  --link-c: rgb(var(--link));
  --ring-c: rgb(var(--ring));
  --success-c: rgb(var(--success));
  --success-subtle-c: rgb(var(--success-subtle));
  --warning-c: rgb(var(--warning));
  --warning-subtle-c: rgb(var(--warning-subtle));
  --danger-c: rgb(var(--danger));
  --danger-subtle-c: rgb(var(--danger-subtle));
  --info-c: rgb(var(--info));
  --info-subtle-c: rgb(var(--info-subtle));
  --tip-bg-c: rgb(var(--tip-bg));
  --tip-text-c: rgb(var(--tip-text));
  --overlay-c: rgb(var(--overlay) / var(--overlay-alpha));
  --shadow-color-c: rgb(var(--shadow-color));
  --chart-1-c: rgb(var(--chart-1));
  --chart-2-c: rgb(var(--chart-2));
  --chart-3-c: rgb(var(--chart-3));
  --chart-4-c: rgb(var(--chart-4));
  --chart-5-c: rgb(var(--chart-5));
  --chart-6-c: rgb(var(--chart-6));
}

/* ===== CHARTS (Step 4): sequential and diverging ramps ========================================
   Audit G4 (docs/hub-migration/README.md, "Charts and KPI tiles"). The categorical set stays
   --chart-1..6 (ink, plum, blue, teal, rust, violet; no red and green pair). The ramps below encode
   MAGNITUDE, never identity: --chart-seq-1..5 is the blue of --chart-3 in five lightness steps per
   theme (light: dark steps on a white surface; dark: light steps on a dark one), every step at or
   above 3:1 against --surface of its theme; --chart-div-neg / -mid / -pos is blue, fg-faint, rust,
   never red against green. scripts/check-chart-palette.js checks the contrast and simulates
   deuteranopia and protanopia (Machado 2009) for every categorical pair, every adjacent ramp pair
   and the diverging ends; run it after touching these. Proposed back to the hub unchanged. */
:root,
[data-theme="light"] {
  --chart-seq-1: 92 132 253;
  --chart-seq-2: 55 107 224;
  --chart-seq-3: 16 84 189;
  --chart-seq-4: 3 62 144;
  --chart-seq-5: 0 41 101;
  --chart-div-neg: var(--chart-3);
  --chart-div-mid: var(--fg-faint);
  --chart-div-pos: var(--chart-5);
}

[data-theme="dark"] {
  --chart-seq-1: 206 221 255;
  --chart-seq-2: 159 191 252;
  --chart-seq-3: 101 162 248;
  --chart-seq-4: 64 133 217;
  --chart-seq-5: 22 110 192;
  --chart-div-neg: var(--chart-3);
  --chart-div-mid: var(--fg-faint);
  --chart-div-pos: var(--chart-5);
}

/* Resolved twins, as for every other color token (Chart.js reads these). */
:root, [data-theme] {
  --chart-seq-1-c: rgb(var(--chart-seq-1));
  --chart-seq-2-c: rgb(var(--chart-seq-2));
  --chart-seq-3-c: rgb(var(--chart-seq-3));
  --chart-seq-4-c: rgb(var(--chart-seq-4));
  --chart-seq-5-c: rgb(var(--chart-seq-5));
  --chart-div-neg-c: rgb(var(--chart-div-neg));
  --chart-div-mid-c: rgb(var(--chart-div-mid));
  --chart-div-pos-c: rgb(var(--chart-div-pos));
}

/* ===== Newsroom: the identity accent in dark (2026-09-30) =====================================
   Timo: "I really don't like the yellow accent on black. this should be white or a tone of
   white/beige." Dark only: the four designboom tokens become a warm off-white and a warm grey wash,
   so the active sidebar row, count badges, unread dots and the hub's --signal aliases read as
   beige on black. Light keeps the hub's yellow. Below the G15 marker on purpose: the verbatim hub
   copy above is untouched and scripts/check-hub-tokens.sh stays green. */
[data-theme="dark"] {
  --designboom: 236 230 216;
  --designboom-solid: 236 230 216;
  --designboom-on: 28 25 23;
  --designboom-subtle: 48 45 40;
}
/* index.html's legacy dark block sets --signal / --signal-soft / --signal-ink to yellows (⌘K room label, counts, fresh
   notifications); same specificity, loaded later, so these follow the beige too. */
:root[data-theme="dark"] { --signal: rgb(var(--designboom-solid)); --signal-soft: rgb(var(--designboom-subtle)); --signal-ink: rgb(var(--designboom-solid)); }

/* ===== Newsroom: charts lead with color (2026-09-30) ==========================================
   Timo: "the colors are really really muted ... add a bit of color and not just black and white,
   especially for charts". The first categorical slot was ink (near-black in light, near-white in
   dark), so every single-series chart and bar strip read as black and white. chart-1 and chart-3
   swap places for the newsroom: the lead series is the hub's blue, ink moves to third. Same six
   colors, so the palette check's pairs are unchanged. */
:root, [data-theme="light"] { --chart-1: 29 95 209; --chart-3: 28 25 23; }
[data-theme="dark"] { --chart-1: 108 168 255; --chart-3: 237 237 236; }