/* G4-UX1D — the experience colors (Owner decision OD-EXPERIENCE-COLORS, 2026-09-24; ADR-011). Seven colors: the CFO Desk main color (the default) and
   Aurora, Midnight, Ocean, Emerald, Sunset, Rose Gold. public/experience-colors.js sets html[data-theme] to the light or dark base the product already
   styles and html[data-xc] to the color; this sheet (loaded last) sets the tokens of that color on html and body — the app tokens (--accent, --cyan, --bg,
   --panel, --panel2, --line, --text, --muted, --theme-*), the workspace tokens (body.v72-workspace) and the desk tokens (body.cfo-desk) — plus the primary
   action, the hero gradients and the Command Center banner. The meaning colors (--green, --red, --amber and the KPI colors) are never touched.
   No inline style anywhere; the picker dots are classes. */
html[data-xc]{color-scheme:light}html[data-xc="midnight"]{color-scheme:dark}

/* CFO Desk — the main color of the new design: the package's LIGHT palette (Owner decision OD-DESK-LIGHT, 2026-09-24; tokens/design-tokens of the handoff: page #f3f6fa,
   paper #fff, ink #102641, sub #596c84, border #dbe4ee, accent #0869c9, soft #eaf3ff, teal #087b71; the hero #122c49 → #104a50; the dock navy #102b49). */
html[data-xc="desk"],html[data-xc="desk"] body,html[data-xc="desk"] body.v72-workspace,html[data-xc="desk"] body.cfo-desk{--bg:#f3f6fa;--panel:#ffffff;--panel2:#f7f9fc;--line:#dbe4ee;--text:#102641;--muted:#596c84;--accent:#0869c9;--cyan:#087b71;--xc-primary:#0869c9;--xc-hero:linear-gradient(120deg,#122c49 0%,#104a50 100%);--xc-tint:rgba(8,105,201,.07);--theme-body:#f3f6fa;--theme-sidebar:linear-gradient(180deg,#ffffff,#f3f6fa);--theme-panel:#ffffff;--theme-input:#ffffff;--theme-header:rgba(255,255,255,.97);--theme-card-glow:rgba(21,53,83,.09);--desk-bg:#f3f6fa;--desk-paper:#ffffff;--desk-ink:#102641;--desk-sub:#596c84;--desk-border:#dbe4ee;--desk-accent:#0869c9;--desk-soft:#eaf3ff;--desk-dock-bg:#102b49;--desk-dock-ink:#d8e6f5;--desk-current:#9ae9e1;--desk-focus:#0869c9}
html[data-xc="desk"] body{background:#f3f6fa}

/* Aurora — violet. */
html[data-xc="aurora"],html[data-xc="aurora"] body,html[data-xc="aurora"] body.v72-workspace,html[data-xc="aurora"] body.cfo-desk{--bg:#f5f3ff;--panel:#ffffff;--panel2:#faf8ff;--line:#e0d9f7;--text:#1e1538;--muted:#5f567a;--accent:#6d28d9;--cyan:#4f46e5;--xc-primary:#6d28d9;--xc-hero:linear-gradient(120deg,#4c1d95 0%,#6d28d9 45%,#7c3aed 75%,#6366f1 100%);--xc-tint:rgba(109,40,217,.08);--theme-body:radial-gradient(circle at 80% 0,#e4dcfd 0,#f5f3ff 46%,#f1edfd 100%);--theme-sidebar:linear-gradient(180deg,#ffffff,#f3effe);--theme-panel:linear-gradient(145deg,#ffffff,#faf8ff);--theme-input:#ffffff;--theme-header:rgba(245,243,255,.96);--theme-card-glow:rgba(109,40,217,.08);--desk-bg:#f5f3ff;--desk-paper:#ffffff;--desk-ink:#1e1538;--desk-sub:#5f567a;--desk-border:#e0d9f7;--desk-accent:#6d28d9;--desk-soft:#ede9fe;--desk-dock-bg:#2e1065;--desk-dock-ink:#ede9fe;--desk-current:#c4b5fd;--desk-focus:#6d28d9}

/* Midnight — dark indigo with violet. */
html[data-xc="midnight"],html[data-xc="midnight"] body,html[data-xc="midnight"] body.v72-workspace,html[data-xc="midnight"] body.cfo-desk{--bg:#11122b;--panel:#1b1c3d;--panel2:#222350;--line:#34366b;--text:#eef0ff;--muted:#aaaddb;--accent:#a78bfa;--cyan:#818cf8;--xc-primary:#7c3aed;--xc-hero:linear-gradient(120deg,#1e1b4b 0%,#312e81 45%,#4c1d95 100%);--xc-tint:rgba(167,139,250,.12);--theme-body:radial-gradient(circle at 78% 0,#2b2470 0,#15163a 40%,#0d0e24 100%);--theme-sidebar:linear-gradient(180deg,#1b1c3d,#11122b);--theme-panel:linear-gradient(145deg,#1f2046,#18193a);--theme-input:#15163a;--theme-header:rgba(17,18,43,.96);--theme-card-glow:rgba(167,139,250,.14);--desk-bg:#11122b;--desk-paper:#1b1c3d;--desk-ink:#eef0ff;--desk-sub:#aaaddb;--desk-border:#34366b;--desk-accent:#a78bfa;--desk-soft:#2a2a5c;--desk-dock-bg:#1c1c42;--desk-dock-ink:#e0e3ff;--desk-current:#c4b5fd;--desk-focus:#c4b5fd}

/* Ocean — blue. */
html[data-xc="ocean"],html[data-xc="ocean"] body,html[data-xc="ocean"] body.v72-workspace,html[data-xc="ocean"] body.cfo-desk{--bg:#eff7fe;--panel:#ffffff;--panel2:#f5faff;--line:#d3e5f5;--text:#0f2236;--muted:#4f6780;--accent:#0e6fbe;--cyan:#0891b2;--xc-primary:#0e6fbe;--xc-hero:linear-gradient(120deg,#0b3f75 0%,#0e6fbe 50%,#1d8fe0 100%);--xc-tint:rgba(14,111,190,.08);--theme-body:radial-gradient(circle at 80% 0,#d6ebfd 0,#eff7fe 46%,#eaf3fc 100%);--theme-sidebar:linear-gradient(180deg,#ffffff,#eef6fe);--theme-panel:linear-gradient(145deg,#ffffff,#f5faff);--theme-input:#ffffff;--theme-header:rgba(239,247,254,.96);--theme-card-glow:rgba(14,111,190,.08);--desk-bg:#eff7fe;--desk-paper:#ffffff;--desk-ink:#0f2236;--desk-sub:#4f6780;--desk-border:#d3e5f5;--desk-accent:#0e6fbe;--desk-soft:#dbeefe;--desk-dock-bg:#0b3558;--desk-dock-ink:#e0f0fe;--desk-current:#7dd3fc;--desk-focus:#0e6fbe}

/* Emerald — green. */
html[data-xc="emerald"],html[data-xc="emerald"] body,html[data-xc="emerald"] body.v72-workspace,html[data-xc="emerald"] body.cfo-desk{--bg:#effaf5;--panel:#ffffff;--panel2:#f5fcf8;--line:#cfeee0;--text:#0f2a22;--muted:#4c6a5f;--accent:#047857;--cyan:#0d9488;--xc-primary:#047857;--xc-hero:linear-gradient(120deg,#064e46 0%,#0f766e 45%,#059669 100%);--xc-tint:rgba(4,120,87,.08);--theme-body:radial-gradient(circle at 80% 0,#d3f5e5 0,#effaf5 46%,#eaf7f0 100%);--theme-sidebar:linear-gradient(180deg,#ffffff,#edf9f3);--theme-panel:linear-gradient(145deg,#ffffff,#f5fcf8);--theme-input:#ffffff;--theme-header:rgba(239,250,245,.96);--theme-card-glow:rgba(4,120,87,.08);--desk-bg:#effaf5;--desk-paper:#ffffff;--desk-ink:#0f2a22;--desk-sub:#4c6a5f;--desk-border:#cfeee0;--desk-accent:#047857;--desk-soft:#d1fae5;--desk-dock-bg:#053f38;--desk-dock-ink:#dcfce7;--desk-current:#6ee7b7;--desk-focus:#047857}

/* Sunset — orange to pink. */
html[data-xc="sunset"],html[data-xc="sunset"] body,html[data-xc="sunset"] body.v72-workspace,html[data-xc="sunset"] body.cfo-desk{--bg:#fff6ef;--panel:#ffffff;--panel2:#fffaf6;--line:#f8dfcc;--text:#2e1a10;--muted:#735a4c;--accent:#c2410c;--cyan:#db2777;--xc-primary:#c2410c;--xc-hero:linear-gradient(120deg,#c2410c 0%,#e0530f 40%,#db2777 100%);--xc-tint:rgba(194,65,12,.08);--theme-body:radial-gradient(circle at 80% 0,#ffe5cf 0,#fff6ef 46%,#fff1e8 100%);--theme-sidebar:linear-gradient(180deg,#ffffff,#fff3ea);--theme-panel:linear-gradient(145deg,#ffffff,#fffaf6);--theme-input:#ffffff;--theme-header:rgba(255,246,239,.96);--theme-card-glow:rgba(194,65,12,.08);--desk-bg:#fff6ef;--desk-paper:#ffffff;--desk-ink:#2e1a10;--desk-sub:#735a4c;--desk-border:#f8dfcc;--desk-accent:#c2410c;--desk-soft:#ffedd5;--desk-dock-bg:#6a2410;--desk-dock-ink:#ffedd5;--desk-current:#fdba74;--desk-focus:#c2410c}

/* Rose Gold — magenta to violet. */
html[data-xc="rose-gold"],html[data-xc="rose-gold"] body,html[data-xc="rose-gold"] body.v72-workspace,html[data-xc="rose-gold"] body.cfo-desk{--bg:#fdf2f8;--panel:#ffffff;--panel2:#fef7fb;--line:#f5d6e6;--text:#2d1422;--muted:#6f5263;--accent:#be185d;--cyan:#9333ea;--xc-primary:#be185d;--xc-hero:linear-gradient(120deg,#831843 0%,#be185d 45%,#7e22ce 100%);--xc-tint:rgba(190,24,93,.08);--theme-body:radial-gradient(circle at 80% 0,#fbdcec 0,#fdf2f8 46%,#fbeef5 100%);--theme-sidebar:linear-gradient(180deg,#ffffff,#fcf0f6);--theme-panel:linear-gradient(145deg,#ffffff,#fef7fb);--theme-input:#ffffff;--theme-header:rgba(253,242,248,.96);--theme-card-glow:rgba(190,24,93,.08);--desk-bg:#fdf2f8;--desk-paper:#ffffff;--desk-ink:#2d1422;--desk-sub:#6f5263;--desk-border:#f5d6e6;--desk-accent:#be185d;--desk-soft:#fce7f3;--desk-dock-bg:#5b1233;--desk-dock-ink:#fce7f3;--desk-current:#f9a8d4;--desk-focus:#be185d}

/* The body follows the color (the base sheets paint it from --theme-body); the primary action takes the color of the experience. */
html[data-xc] body{background:var(--theme-body);color:var(--text)}
html[data-xc] .primary{background:var(--xc-primary)!important;border-color:var(--xc-primary)!important;color:#fff!important}
/* The hero banners carry the gradient of the color with white text (the concept of the Owner's reference screenshots); a primary action on a hero turns white. */
html[data-xc] .hero{background:var(--xc-hero);border-color:transparent;color:#fff}
html[data-xc] .hero>div>h3,html[data-xc] .hero>div>p{color:#fff}
html[data-xc] .hero .primary{background:#fff!important;border-color:#fff!important;color:var(--xc-primary)!important}
html[data-xc] .hero .pill{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff}
html[data-xc] .cc-home{border-color:var(--line);background:var(--xc-tint)}
html[data-xc] .cc-head{margin:-18px -20px 14px;padding:18px 20px;border-radius:18px 18px 12px 12px;background:var(--xc-hero);color:#fff}
html[data-xc] .cc-head small,html[data-xc] .cc-head h2,html[data-xc] .cc-head p{color:#fff}
html[data-xc] .cc-head .cc-truth{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.14)}
@media (max-width:600px){html[data-xc] .cc-head{margin:-14px -14px 12px;padding:14px}}

/* The dock marker of the current destination takes the color (the CFO Desk color keeps the package's teal). */
html[data-xc="aurora"]{--xc-marker:linear-gradient(145deg,#8b5cf6,#6d28d9)}html[data-xc="midnight"]{--xc-marker:linear-gradient(145deg,#a78bfa,#7c3aed)}html[data-xc="ocean"]{--xc-marker:linear-gradient(145deg,#38bdf8,#0e6fbe)}html[data-xc="emerald"]{--xc-marker:linear-gradient(145deg,#34d399,#047857)}html[data-xc="sunset"]{--xc-marker:linear-gradient(145deg,#fb923c,#db2777)}html[data-xc="rose-gold"]{--xc-marker:linear-gradient(145deg,#f472b6,#be185d)}
html[data-xc]:not([data-xc="desk"]) #cfoDeskDock .desk-marker{background:var(--xc-marker);box-shadow:0 0 0 5px var(--desk-dock-bg),0 7px 18px var(--xc-tint)}

/* The picker (#v72ThemePopover): «Choose your experience color» — two columns of named colors with a dot each, the current one pressed. */
.xc-picker h3{margin:0 0 10px;font-size:14px}
.xc-grid{display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));gap:8px}
.xc-choice{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}
.xc-choice[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;font-weight:700}
.xc-choice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.xc-dot{flex:0 0 auto;width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.xc-dot[data-xc-dot="desk"]{background:#0869c9}.xc-dot[data-xc-dot="aurora"]{background:#8b5cf6}.xc-dot[data-xc-dot="midnight"]{background:#111827}.xc-dot[data-xc-dot="ocean"]{background:#0ea5e9}.xc-dot[data-xc-dot="emerald"]{background:#059669}.xc-dot[data-xc-dot="sunset"]{background:#f97316}.xc-dot[data-xc-dot="rose-gold"]{background:#be185d}
@media (max-width:600px){.xc-grid{grid-template-columns:1fr 1fr}}