/* src/public/office/dwo-themes.css — THE single definition of the DWO colour themes (Burgundy / Executive Blue / Emerald dark sets, plus Cream's light set at the end).
   Extracted verbatim from office/styles.css (2026-10-12, Creator V3 themes task) so /office and Creator V3 load the SAME file and cannot drift. Every block is keyed on
   `.app-shell[data-dwo-theme="x"]` (DWO stamps that on its shell) AND `html[data-dwo-theme="x"]` (Creator stamps it on <html> before first paint).
   Cream's tokens remain in office/styles.css :root (they are DWO's default, not a data-attribute block); the cream block at the bottom restates them for the html-stamped case and
   test/creator-v3-themes.test.js fails if the two ever differ. Load order: AFTER office/styles.css (same order the blocks had inside it). */
/* ═══ DWO LIQUID GLASS THEMES (Pass 1 + Pass 2) — Burgundy / Executive Blue / Emerald ═══════════
   Three complete dark-polarity token sets, scoped to .app-shell[data-dwo-theme="..."] — stamped by
   app.js's Shell on every route since Pass 2 widened it (see the :root comment above for the full
   scoping rationale). Pass 1's audit covered My Office, its header, its bottom nav, and the shared
   primitives (EmptyState/Badge/Skeleton/Tag) those render; Pass 2 extended the same surface list to
   every other /office page's own rules (this file's page-class section above, plus each page's own
   inline styles) — restated here with dark values rather than duplicated markup or a forked page.

   Each block sets:
     - the *-rgb triples Tailwind's ink/gold/paper/paper2/paper3/danger utilities read (so every
       text-ink/NN, bg-paper2 etc. class already in components.js/ui-kit.js/app.js flips for free)
     - --line/--line-2 (spec: white border 0.14-0.24, not ink-based)
     - --card-* (non-blur/prefers-reduced-transparency fallback: "a slightly more opaque dark
       surface", spec §Glass construction) and --glass-* (the translucent-white-over-glow recipe:
       spec's 0.14 leading edge fading to 0.045, thin white border, inset top highlight)
     - --glass-blur: 18px, not spec's literal 24-30px — MEASURED deviation, see the task report's
       perf table. saturate() is dropped entirely for the same reason cream already dropped it
       (Phase B's own perf note above): a scripted-scroll comparison over 15 stacked glass regions,
       4x-CPU-throttled, showed blur(26px)+saturate(130%) costing ~+4.5ms avg frame time and
       2-3x the dropped-frame count of blur(18px) alone, which measured within noise of the
       no-glass baseline. Same finding, same fix, same tool cream already used.
     - --hero-bg/--hero-border/--pill-bg — the "restrained theme-colored radial glow" the light
       theme doesn't need (cream reads atmosphere via texture; dark reads it via an actual glow,
       per spec's approved visual hierarchy) */

.app-shell[data-dwo-theme="burgundy"],
html[data-dwo-theme="burgundy"] {
  --paper-rgb: 23 10 16;      /* #170A10 — Base */
  --paper2-rgb: 43 11 24;     /* #2B0B18 — Depth */
  --paper3-rgb: 58 18 32;     /* #3A1220 — a third, lighter elevation step (hover/skeleton/track) */
  --ink-rgb: 255 255 255;
  --gold-rgb: 214 168 62;     /* #D6A83E */
  --danger-rgb: 229 100 74;   /* #E5644A — measured 5.4-5.8:1 on Base/Depth; cream's #A34428 measured 2.9-3.1:1 here, below AA */
  --line: rgb(255 255 255 / 0.16);
  --line-2: rgb(255 255 255 / 0.24);
  /* Redeclare the composed aliases HERE TOO, on this same element — a custom property whose value
     is itself var(--other-property) resolves ONCE at the element that declares it and inherits
     that frozen value down the tree; only overriding the *-rgb triplets above would leave every
     var(--paper)/var(--ink)/var(--gold)/var(--text-secondary) consumer still seeing cream's :root
     values. Measured, not assumed — see the @supports block's comment for how this was caught. */
  --paper: rgb(var(--paper-rgb));
  --paper-2: rgb(var(--paper2-rgb));
  --paper-3: rgb(var(--paper3-rgb));
  --ink: rgb(var(--ink-rgb));
  --gold: rgb(var(--gold-rgb));
  --gold-soft: rgb(var(--gold-rgb) / 0.12);
  --gold-edge: rgb(var(--gold-rgb) / 0.34);
  --danger: rgb(var(--danger-rgb));
  --text-secondary: rgb(var(--ink-rgb) / var(--text-secondary-alpha));
  --text-tertiary: rgb(var(--ink-rgb) / var(--text-tertiary-alpha));

  --card-bg-solid: linear-gradient(180deg, rgb(var(--paper3-rgb)), rgb(var(--paper2-rgb)));
  --card-border: rgb(255 255 255 / 0.14);
  --card-shadow: 0 1px 2px rgba(0,0,0,0.24), 0 10px 28px rgba(0,0,0,0.32);
  --glass-blur: 18px;
  --glass-bg: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045));
  --glass-border-color: rgb(255 255 255 / 0.20);
  --glass-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.03);

  --hero-bg: radial-gradient(90% 130% at 100% -15%, rgba(165,46,83,0.38), transparent 62%), linear-gradient(135deg, rgb(var(--paper2-rgb)) 0%, rgb(var(--paper-rgb)) 100%);
  --hero-border: rgb(255 255 255 / 0.14);
  --pill-bg: rgba(255,255,255,0.10);
}

.app-shell[data-dwo-theme="executive_blue"],
html[data-dwo-theme="executive_blue"] {
  --paper-rgb: 7 21 34;       /* #071522 — Base */
  --paper2-rgb: 13 42 66;     /* #0D2A42 — Depth */
  --paper3-rgb: 18 63 95;     /* #123F5F */
  --ink-rgb: 255 255 255;
  --gold-rgb: 214 168 62;
  --danger-rgb: 229 100 74;
  --line: rgb(255 255 255 / 0.16);
  --line-2: rgb(255 255 255 / 0.24);
  /* See the burgundy block above for why these composed aliases are redeclared here too. */
  --paper: rgb(var(--paper-rgb));
  --paper-2: rgb(var(--paper2-rgb));
  --paper-3: rgb(var(--paper3-rgb));
  --ink: rgb(var(--ink-rgb));
  --gold: rgb(var(--gold-rgb));
  --gold-soft: rgb(var(--gold-rgb) / 0.12);
  --gold-edge: rgb(var(--gold-rgb) / 0.34);
  --danger: rgb(var(--danger-rgb));
  --text-secondary: rgb(var(--ink-rgb) / var(--text-secondary-alpha));
  --text-tertiary: rgb(var(--ink-rgb) / var(--text-tertiary-alpha));

  --card-bg-solid: linear-gradient(180deg, rgb(var(--paper3-rgb)), rgb(var(--paper2-rgb)));
  --card-border: rgb(255 255 255 / 0.14);
  --card-shadow: 0 1px 2px rgba(0,0,0,0.24), 0 10px 28px rgba(0,0,0,0.32);
  --glass-blur: 18px;
  --glass-bg: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045));
  --glass-border-color: rgb(255 255 255 / 0.20);
  --glass-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.03);

  --hero-bg: radial-gradient(90% 130% at 100% -15%, rgba(38,118,182,0.38), transparent 62%), linear-gradient(135deg, rgb(var(--paper2-rgb)) 0%, rgb(var(--paper-rgb)) 100%);
  --hero-border: rgb(255 255 255 / 0.14);
  --pill-bg: rgba(255,255,255,0.10);
}

.app-shell[data-dwo-theme="emerald"],
html[data-dwo-theme="emerald"] {
  --paper-rgb: 7 23 18;       /* #071712 — Base */
  --paper2-rgb: 13 48 36;     /* #0D3024 — Depth */
  --paper3-rgb: 18 68 52;     /* #124434 */
  --ink-rgb: 255 255 255;
  --gold-rgb: 214 168 62;
  --danger-rgb: 229 100 74;
  --line: rgb(255 255 255 / 0.16);
  --line-2: rgb(255 255 255 / 0.24);
  /* See the burgundy block above for why these composed aliases are redeclared here too. */
  --paper: rgb(var(--paper-rgb));
  --paper-2: rgb(var(--paper2-rgb));
  --paper-3: rgb(var(--paper3-rgb));
  --ink: rgb(var(--ink-rgb));
  --gold: rgb(var(--gold-rgb));
  --gold-soft: rgb(var(--gold-rgb) / 0.12);
  --gold-edge: rgb(var(--gold-rgb) / 0.34);
  --danger: rgb(var(--danger-rgb));
  --text-secondary: rgb(var(--ink-rgb) / var(--text-secondary-alpha));
  --text-tertiary: rgb(var(--ink-rgb) / var(--text-tertiary-alpha));

  --card-bg-solid: linear-gradient(180deg, rgb(var(--paper3-rgb)), rgb(var(--paper2-rgb)));
  --card-border: rgb(255 255 255 / 0.14);
  --card-shadow: 0 1px 2px rgba(0,0,0,0.24), 0 10px 28px rgba(0,0,0,0.32);
  --glass-blur: 18px;
  --glass-bg: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045));
  --glass-border-color: rgb(255 255 255 / 0.20);
  --glass-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.03);

  --hero-bg: radial-gradient(90% 130% at 100% -15%, rgba(36,134,99,0.38), transparent 62%), linear-gradient(135deg, rgb(var(--paper2-rgb)) 0%, rgb(var(--paper-rgb)) 100%);
  --hero-border: rgb(255 255 255 / 0.14);
  --pill-bg: rgba(255,255,255,0.10);
}


/* Cream (the LIGHT theme). DWO's own cream is its :root in office/styles.css; this block restates the same values for the html-stamped case (Creator V3, where office/styles.css is not
   loaded; the `.app-shell` form lets Creator's theme picker paint a Cream swatch inside any theme). test/creator-v3-themes.test.js compares every property below with that :root and fails on any difference. */
.app-shell[data-dwo-theme="cream"],
html[data-dwo-theme="cream"] {
  --paper-rgb: 250 243 231;
  --paper2-rgb: 244 234 217;
  --paper3-rgb: 236 220 195;
  --ink-rgb: 43 33 24;
  --gold-rgb: 185 129 46;
  --danger-rgb: 163 68 40;
  --line: rgb(var(--ink-rgb) / 0.10);
  --line-2: rgb(var(--ink-rgb) / 0.16);
  --paper: rgb(var(--paper-rgb));
  --paper-2: rgb(var(--paper2-rgb));
  --paper-3: rgb(var(--paper3-rgb));
  --ink: rgb(var(--ink-rgb));
  --gold: rgb(var(--gold-rgb));
  --gold-soft: rgb(var(--gold-rgb) / 0.12);
  --gold-edge: rgb(var(--gold-rgb) / 0.34);
  --danger: rgb(var(--danger-rgb));
  --text-secondary: rgb(var(--ink-rgb) / var(--text-secondary-alpha));
  --text-tertiary: rgb(var(--ink-rgb) / var(--text-tertiary-alpha));
  --card-bg-solid: linear-gradient(180deg, #FFFFFF, var(--paper-2));
  --card-border: var(--line);
  --card-shadow: 0 1px 2px rgba(43,33,24,0.04), 0 10px 26px rgba(43,33,24,0.07);
  --glass-blur: 10px;
  --glass-bg: linear-gradient(160deg, rgba(255,255,255,0.66), rgba(250,240,222,0.46) 55%, rgba(236,220,195,0.38));
  --glass-border-color: rgba(255,255,255,0.55);
  --glass-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 0 0 1px rgba(185,129,46,0.05);
}