/* RocSite themes, every Felarity + Fusion palette as a CSS-token set.
A theme is a `data-theme` value on ; both shells (hud = app.html,
lumen = lumen.html) already read these token names, so a theme is purely
token overrides. No component CSS lives here.
GENERATED from the real sources, not transcribed:
Felarity /ai_velarity/frontend_v2/src/styles.css + theme.ts (22 themes)
Fusion /ai_velarity/app/frontend/atomfusion.html (2 themes)
Every theme defines the FULL token set both shells use, so no shell can
render unstyled under any theme. Text colours are contrast-checked against
each theme's own background (ink >= 7:1, dim >= 4.5:1, faint/accent/status
>= 3:1) and lifted until they pass -- tests/test_themes.py re-proves this.
How a Felarity palette maps onto RocSite's token names, so this stays
re-derivable if the upstream palettes change:
--bg <- --bg --ok <- --ok
--ink/--text <- --ink --bad <- --err
--dim <- --text-dim --warn <- --warn
--line <- --panel-line --accent/--gold <- --cy
--line2 <- --panel-line-soft --accent-2/--gold2 <- --cy-bright
--glow <- --cy-c, respaced to 'R G B' (both shells do rgb(var(--glow)/.4),
which does not accept the comma form)
Three tokens RocSite has that Felarity does not, derived here:
--panel dark themes: --bg mixed 6% toward --ink; light: 55% toward white
--faint --dim mixed 42% toward --bg, then lifted to clear 3:1
--line2-dark accent at .34 (dark) / .28 (light) -- lumen needs it to read
STRONGER than --line2, which is the softest border
One more additive token the shells should consume (P2-12 / #25284):
--theme-color <- --bg (browser chrome / ; HUD ambient)
NOTE: this file only carries tokens. HUD ambient glow in the shells still
hardcodes a colour literal instead of --glow -- that is ops_tasks #1788.
--theme-color is defined on :root as var(--bg) so browser chrome can follow
the selected theme; shells still hardcode until
they read this token. */
:root[data-theme="paper"]{
--logo-ink:url(/assets/rocsiteai_color.png?v=2); /* light theme -> colour wordmark */
/* Paper, Clean light · black on white */
--bg:#ffffff;
--panel:#ffffff;
--ink:#1f2328;
--text:#1f2328;
--dim:#3d444c;
--faint:#72777b;
--line:rgba(18,22,28,0.46);
--line2:rgba(18,22,28,0.22);
--line2-dark:rgba(17,17,17,.28);
--accent:#111111;
--accent-2:#000000;
--accent-soft:rgba(17,17,17,.08);
--accent-text:#ffffff;
--sunken:#c5c6c7;
--gold:#111111;
--gold2:#000000;
--glow:17 17 17;
--ok:#15803d;
--bad:#b91c1c;
--warn:#b45309;
--accent-on-bg:#111111;
--vignette:rgba(2,6,23,.07);
--ok-text:#137437;
--warn-text:#a34b08;
--bad-text:#b91c1c;
--sunken-mix:16%;
}
:root[data-theme="carbon"]{
/* Carbon, Clean dark · white on near-black */
--bg:#0d0d0d;
--panel:#1a1a1a;
--ink:#ededed;
--text:#ededed;
--dim:#c8c8c8;
--faint:#828282;
--line:rgba(255,255,255,0.22);
--line2:rgba(255,255,255,0.12);
--line2-dark:rgba(230,230,230,.34);
--accent:#e6e6e6;
--accent-2:#ffffff;
--accent-soft:rgba(230,230,230,.12);
--accent-text:#000000;
--sunken:#000000;
--gold:#e6e6e6;
--gold2:#ffffff;
--glow:230 230 230;
--ok:#4ade80;
--bad:#fca5a5;
--warn:#fcd34d;
--accent-on-bg:#e6e6e6;
--vignette:rgba(0,0,0,.72);
--ok-text:#4ade80;
--warn-text:#fcd34d;
--bad-text:#fca5a5;
--sunken-mix:42%;
}
:root[data-theme="cream"]{
--logo-ink:url(/assets/rocsiteai_color.png?v=2); /* light theme -> colour wordmark */
/* Cream, Warm & bookish · easy on the eyes */
--bg:#f5f1e8;
--panel:#faf9f5;
--ink:#241d12;
--text:#241d12;
--dim:#4c4230;
--faint:#736d62;
--line:rgba(58,45,30,0.52);
--line2:rgba(58,45,30,0.26);
--line2-dark:rgba(58,50,38,.28);
--accent:#3a3226;
--accent-2:#241d13;
--accent-soft:rgba(58,50,38,.08);
--accent-text:#ffffff;
--sunken:#bfbab0;
--gold:#3a3226;
--gold2:#241d13;
--glow:58 50 38;
--ok:#1f7a44;
--bad:#a31616;
--warn:#8a5a00;
--accent-on-bg:#3a3226;
--vignette:rgba(2,6,23,.07);
--ok-text:#1a6638;
--warn-text:#815400;
--bad-text:#a31616;
--sunken-mix:16%;
}
:root[data-theme="reader-light"]{
--logo-ink:url(/assets/rocsiteai_color.png?v=2); /* light theme -> colour wordmark */
/* Reader Light, Max contrast · black on white */
--bg:#ffffff;
--panel:#ffffff;
--ink:#0b0f19;
--text:#0b0f19;
--dim:#2f3641;
--faint:#73777e;
--line:rgba(15,23,42,0.52);
--line2:rgba(15,23,42,0.26);
--line2-dark:rgba(29,78,216,.28);
--accent:#1d4ed8;
--accent-2:#1e40af;
--accent-soft:rgba(29,78,216,.08);
--accent-text:#ffffff;
--sunken:#c0c1c3;
--gold:#1d4ed8;
--gold2:#1e40af;
--glow:29 78 216;
--ok:#15803d;
--bad:#b91c1c;
--warn:#b45309;
--accent-on-bg:#1d4ed8;
--vignette:rgba(2,6,23,.07);
--ok-text:#137437;
--warn-text:#a34b08;
--bad-text:#b91c1c;
--sunken-mix:16%;
}
:root[data-theme="reader-dark"]{
/* Reader Dark, Max contrast · white on black */
--bg:#000000;
--panel:#0f0f0f;
--ink:#f6f8fb;
--text:#f6f8fb;
--dim:#c6ccd6;
--faint:#787b81;
--line:rgba(255,255,255,0.30);
--line2:rgba(255,255,255,0.16);
--line2-dark:rgba(124,192,255,.34);
--accent:#7cc0ff;
--accent-2:#b9dcff;
--accent-soft:rgba(124,192,255,.12);
--accent-text:#000000;
--sunken:#000000;
--gold:#7cc0ff;
--gold2:#b9dcff;
--glow:124 192 255;
--ok:#4ade80;
--bad:#fca5a5;
--warn:#fcd34d;
--accent-on-bg:#7cc0ff;
--vignette:rgba(0,0,0,.72);
--ok-text:#4ade80;
--warn-text:#fcd34d;
--bad-text:#fca5a5;
--sunken-mix:42%;
}
:root[data-theme="sepia"]{
--logo-ink:url(/assets/rocsiteai_color.png?v=2); /* light theme -> colour wordmark */
/* Sepia, Warm · easy on the eyes */
--bg:#f4ecd8;
--panel:#faf6ed;
--ink:#2c1810;
--text:#2c1810;
--dim:#574030;
--faint:#76695b;
--line:rgba(110,72,40,0.55);
--line2:rgba(110,72,40,0.28);
--line2-dark:rgba(139,94,52,.28);
--accent:#8b5e34;
--accent-2:#6d3610;
--accent-soft:rgba(139,94,52,.08);
--accent-text:#ffffff;
--sunken:#c0b5a4;
--gold:#8b5e34;
--gold2:#6d3610;
--glow:139 94 52;
--ok:#1f7a44;
--bad:#a31616;
--warn:#8a5a00;
--accent-on-bg:#78512d;
--vignette:rgba(2,6,23,.07);
--ok-text:#1a6739;
--warn-text:#7d5200;
--bad-text:#a31616;
--sunken-mix:16%;
}
:root[data-theme="gala"]{
/* Gala, Deep plum · gold · crisp white, very readable */
--bg:#140e20;
--panel:#211b2d;
--ink:#f3eef9;
--text:#f3eef9;
--dim:#bcaed2;
--faint:#8b829c;
--line:rgba(208,194,224,0.28);
--line2:rgba(208,194,224,0.14);
--line2-dark:rgba(233,185,73,.34);
--accent:#e9b949;
--accent-2:#ffd98a;
--accent-soft:rgba(233,185,73,.12);
--accent-text:#000000;
--sunken:#000000;
--gold:#e9b949;
--gold2:#ffd98a;
--glow:233 185 73;
--ok:#4ade80;
--bad:#fb7185;
--warn:#fcd34d;
--accent-on-bg:#e9b949;
--vignette:rgba(0,0,0,.72);
--ok-text:#4ade80;
--warn-text:#fcd34d;
--bad-text:#fb7185;
--sunken-mix:42%;
}
:root[data-theme="nebula"]{
/* Nebula, Deep space navy · bright cyan HUD */
--bg:#061626;
--panel:#142333;
--ink:#eaf6ff;
--text:#eaf6ff;
--dim:#a8ccdf;
--faint:#718d9d;
--line:rgba(61,214,245,0.30);
--line2:rgba(61,214,245,0.15);
--line2-dark:rgba(61,214,245,.34);
--accent:#3dd6f5;
--accent-2:#8fe9ff;
--accent-soft:rgba(61,214,245,.12);
--accent-text:#000000;
--sunken:#000000;
--gold:#3dd6f5;
--gold2:#8fe9ff;
--glow:61 214 245;
--ok:#4ade80;
--bad:#fb7185;
--warn:#fcd34d;
--accent-on-bg:#3dd6f5;
--vignette:rgba(0,0,0,.72);
--ok-text:#4ade80;
--warn-text:#fcd34d;
--bad-text:#fb7185;
--sunken-mix:42%;
}
:root[data-theme="midnight"]{
/* Midnight, Cinematic dark · bright cyan */
--bg:#02070c;
--panel:#0f161b;
--ink:#ddf9ff;
--text:#ddf9ff;
--dim:#aecdda;
--faint:#6d828c;
--line:rgba(56,224,255,0.42);
--line2:rgba(56,224,255,0.24);
--line2-dark:rgba(56,224,255,.34);
--accent:#38e0ff;
--accent-2:#8af0ff;
--accent-soft:rgba(56,224,255,.12);
--accent-text:#000000;
--sunken:#000000;
--gold:#38e0ff;
--gold2:#8af0ff;
--glow:56 224 255;
--ok:#6ee7b7;
--bad:#fb7185;
--warn:#fbbf24;
--accent-on-bg:#38e0ff;
--vignette:rgba(0,0,0,.72);
--ok-text:#6ee7b7;
--warn-text:#fbbf24;
--bad-text:#fb7185;
--sunken-mix:42%;
}
:root[data-theme="amber"]{
/* Amber, Felarity gold, dark */
--bg:#0d0a04;
--panel:#1b1810;
--ink:#fbeecf;
--text:#fbeecf;
--dim:#cbb78c;
--faint:#8f8060;
--line:rgba(235,182,96,0.30);
--line2:rgba(235,182,96,0.16);
--line2-dark:rgba(235,182,96,.34);
--accent:#f0bf62;
--accent-2:#ffd98c;
--accent-soft:rgba(235,182,96,.12);
--accent-text:#000000;
--sunken:#000000;
--gold:#f0bf62;
--gold2:#ffd98c;
--glow:235 182 96;
--ok:#6ee7b7;
--bad:#fb7185;
--warn:#fbbf24;
--accent-on-bg:#f0bf62;
--vignette:rgba(0,0,0,.72);
--ok-text:#6ee7b7;
--warn-text:#fbbf24;
--bad-text:#fb7185;
--sunken-mix:42%;
}
:root[data-theme="daylight"]{
--logo-ink:url(/assets/rocsiteai_color.png?v=2); /* light theme -> colour wordmark */
/* Daylight, Light · daytime readable */
--bg:#eef2f6;
--panel:#f7f9fb;
--ink:#13232d;
--text:#13232d;
--dim:#3a4a55;
--faint:#667076;
--line:rgba(19,35,45,0.46);
--line2:rgba(13,138,168,0.16);
--line2-dark:rgba(13,138,168,.28);
--accent:#0d8aa8;
--accent-2:#076480;
--accent-soft:rgba(13,138,168,.08);
--accent-text:#000000;
--sunken:#b5bcc2;
--gold:#0d8aa8;
--gold2:#076480;
--glow:13 138 168;
--ok:#0f9d6b;
--bad:#d6295a;
--warn:#b45309;
--accent-on-bg:#096378;
--vignette:rgba(2,6,23,.07);
--ok-text:#0a6a48;
--warn-text:#974608;
--bad-text:#ae2149;
--sunken-mix:16%;
}
:root[data-theme="corp-blue"]{
--logo-ink:url(/assets/rocsiteai_color.png?v=2); /* light theme -> colour wordmark */
/* Corporate Blue, Light · navy + azure */
--bg:#ffffff;
--panel:#ffffff;
--ink:#14213d;
--text:#14213d;
--dim:#39405a;
--faint:#717687;
--line:rgba(20,33,61,0.44);
--line2:rgba(37,99,235,0.12);
--line2-dark:rgba(37,99,235,.28);
--accent:#2563eb;
--accent-2:#1e40af;
--accent-soft:rgba(37,99,235,.08);
--accent-text:#ffffff;
--sunken:#c2c5cd;
--gold:#2563eb;
--gold2:#1e40af;
--glow:37 99 235;
--ok:#059669;
--bad:#dc2626;
--warn:#b45309;
--accent-on-bg:#1557e6;
--vignette:rgba(2,6,23,.07);
--ok-text:#047351;
--warn-text:#a34b08;
--bad-text:#c11f1f;
--sunken-mix:16%;
}
:root[data-theme="slate"]{
--logo-ink:url(/assets/rocsiteai_color.png?v=2); /* light theme -> colour wordmark */
/* Slate, Light · cool professional grey */
--bg:#f1f5f9;
--panel:#f9fafc;
--ink:#1e293b;
--text:#1e293b;
--dim:#3d4657;
--faint:#69707b;
--line:rgba(30,41,59,0.46);
--line2:rgba(71,85,105,0.14);
--line2-dark:rgba(71,85,105,.28);
--accent:#475569;
--accent-2:#334155;
--accent-soft:rgba(71,85,105,.08);
--accent-text:#ffffff;
--sunken:#bac0c8;
--gold:#475569;
--gold2:#334155;
--glow:71 85 105;
--ok:#0f766e;
--bad:#be123c;
--warn:#b45309;
--accent-on-bg:#475569;
--vignette:rgba(2,6,23,.07);
--ok-text:#0d665e;
--warn-text:#994708;
--bad-text:#b7113a;
--sunken-mix:16%;
}
:root[data-theme="graphite"]{
/* Graphite, Dark · professional grey */
--bg:#181b20;
--panel:#24272c;
--ink:#dfe4ec;
--text:#dfe4ec;
--dim:#bbc5d4;
--faint:#888e98;
--line:rgba(142,161,189,0.28);
--line2:rgba(142,161,189,0.16);
--line2-dark:rgba(142,161,189,.34);
--accent:#8ea1bd;
--accent-2:#b9c6da;
--accent-soft:rgba(142,161,189,.12);
--accent-text:#000000;
--sunken:#000000;
--gold:#8ea1bd;
--gold2:#b9c6da;
--glow:142 161 189;
--ok:#34d399;
--bad:#f87171;
--warn:#fbbf24;
--accent-on-bg:#97a8c2;
--vignette:rgba(0,0,0,.72);
--ok-text:#34d399;
--warn-text:#fbbf24;
--bad-text:#f98787;
--sunken-mix:42%;
}
:root[data-theme="navy"]{
/* Navy, Dark · deep navy + azure */
--bg:#0b1220;
--panel:#171e2d;
--ink:#d7e2f4;
--text:#d7e2f4;
--dim:#a2b5d0;
--faint:#79879c;
--line:rgba(91,141,239,0.26);
--line2:rgba(91,141,239,0.15);
--line2-dark:rgba(91,141,239,.34);
--accent:#5b8def;
--accent-2:#93b4f5;
--accent-soft:rgba(91,141,239,.12);
--accent-text:#000000;
--sunken:#000000;
--gold:#5b8def;
--gold2:#93b4f5;
--glow:91 141 239;
--ok:#34d399;
--bad:#fb7185;
--warn:#fbbf24;
--accent-on-bg:#89adf3;
--vignette:rgba(0,0,0,.72);
--ok-text:#34d399;
--warn-text:#fbbf24;
--bad-text:#fb7185;
--sunken-mix:42%;
}
:root[data-theme="emerald"]{
--logo-ink:url(/assets/rocsiteai_color.png?v=2); /* light theme -> colour wordmark */
/* Emerald, Light · restrained green */
--bg:#ffffff;
--panel:#ffffff;
--ink:#0f2b22;
--text:#0f2b22;
--dim:#33473f;
--faint:#6d7874;
--line:rgba(15,43,34,0.44);
--line2:rgba(5,150,105,0.12);
--line2-dark:rgba(5,150,105,.28);
--accent:#059669;
--accent-2:#047857;
--accent-soft:rgba(5,150,105,.08);
--accent-text:#000000;
--sunken:#c1c8c6;
--gold:#059669;
--gold2:#047857;
--glow:5 150 105;
--ok:#059669;
--bad:#dc2626;
--warn:#b45309;
--accent-on-bg:#036b4b;
--vignette:rgba(2,6,23,.07);
--ok-text:#047351;
--warn-text:#a34b08;
--bad-text:#c11f1f;
--sunken-mix:16%;
}
:root[data-theme="ink"]{
--logo-ink:url(/assets/rocsiteai_color.png?v=2); /* light theme -> colour wordmark */
/* Ink, Minimal · near-black on warm white */
--bg:#faf9f7;
--panel:#fdfcfb;
--ink:#1c1917;
--text:#1c1917;
--dim:#443e38;
--faint:#75726d;
--line:rgba(28,25,23,0.46);
--line2:rgba(28,25,23,0.1);
--line2-dark:rgba(28,25,23,.28);
--accent:#1c1917;
--accent-2:#292524;
--accent-soft:rgba(28,25,23,.08);
--accent-text:#ffffff;
--sunken:#c0bfbd;
--gold:#1c1917;
--gold2:#292524;
--glow:28 25 23;
--ok:#15803d;
--bad:#b91c1c;
--warn:#a16207;
--accent-on-bg:#1c1917;
--vignette:rgba(2,6,23,.07);
--ok-text:#116c34;
--warn-text:#8c5506;
--bad-text:#b91c1c;
--sunken-mix:16%;
}
:root[data-theme="crimson"]{
--logo-ink:url(/assets/rocsiteai_color.png?v=2); /* light theme -> colour wordmark */
/* Crimson, Light · restrained red */
--bg:#ffffff;
--panel:#ffffff;
--ink:#2b1414;
--text:#2b1414;
--dim:#4a3636;
--faint:#807373;
--line:rgba(43,20,20,0.44);
--line2:rgba(185,28,28,0.11);
--line2-dark:rgba(185,28,28,.28);
--accent:#b91c1c;
--accent-2:#991b1b;
--accent-soft:rgba(185,28,28,.08);
--accent-text:#ffffff;
--sunken:#c8c2c2;
--gold:#b91c1c;
--gold2:#991b1b;
--glow:185 28 28;
--ok:#15803d;
--bad:#dc2626;
--warn:#b45309;
--accent-on-bg:#b91c1c;
--vignette:rgba(2,6,23,.07);
--ok-text:#137437;
--warn-text:#a34b08;
--bad-text:#c11f1f;
--sunken-mix:16%;
}
:root[data-theme="sky"]{
--logo-ink:url(/assets/rocsiteai_color.png?v=2); /* light theme -> colour wordmark */
/* Sky, Light · airy blue */
--bg:#f0f9ff;
--panel:#f8fcff;
--ink:#0c2a3f;
--text:#0c2a3f;
--dim:#324a5b;
--faint:#64747e;
--line:rgba(12,42,63,0.44);
--line2:rgba(2,132,199,0.12);
--line2-dark:rgba(2,132,199,.28);
--accent:#0284c7;
--accent-2:#0369a1;
--accent-soft:rgba(2,132,199,.08);
--accent-text:#000000;
--sunken:#b5c3cd;
--gold:#0284c7;
--gold2:#0369a1;
--glow:2 132 199;
--ok:#0f766e;
--bad:#dc2626;
--warn:#b45309;
--accent-on-bg:#026599;
--vignette:rgba(2,6,23,.07);
--ok-text:#0d6861;
--warn-text:#9d4808;
--bad-text:#b91e1e;
--sunken-mix:16%;
}
:root[data-theme="onyx"]{
/* Onyx, Dark · clean indigo, minimal */
--bg:#0e1117;
--panel:#1b1e24;
--ink:#e6e8ec;
--text:#e6e8ec;
--dim:#adb2bd;
--faint:#81858e;
--line:rgba(148, 163, 214, 0.15);
--line2:rgba(148, 163, 214, 0.09);
--line2-dark:rgba(129,140,248,.34);
--accent:#818cf8;
--accent-2:#a5b4fc;
--accent-soft:rgba(129,140,248,.12);
--accent-text:#000000;
--sunken:#000000;
--gold:#818cf8;
--gold2:#a5b4fc;
--glow:129 140 248;
--ok:#34d399;
--bad:#fca5a5;
--warn:#fbbf24;
--accent-on-bg:#b4bbfb;
--vignette:rgba(0,0,0,.72);
--ok-text:#34d399;
--warn-text:#fbbf24;
--bad-text:#fca5a5;
--sunken-mix:42%;
}
:root[data-theme="porcelain"]{
--logo-ink:url(/assets/rocsiteai_color.png?v=2); /* light theme -> colour wordmark */
/* Porcelain, Light · crisp indigo on white */
--bg:#ffffff;
--panel:#ffffff;
--ink:#1e293b;
--text:#1e293b;
--dim:#3f4a5c;
--faint:#717782;
--line:rgba(30,41,59,0.46);
--line2:rgba(15, 23, 42, 0.06);
--line2-dark:rgba(79,70,229,.28);
--accent:#4f46e5;
--accent-2:#4338ca;
--accent-soft:rgba(79,70,229,.08);
--accent-text:#ffffff;
--sunken:#c4c7cc;
--gold:#4f46e5;
--gold2:#4338ca;
--glow:79 70 229;
--ok:#059669;
--bad:#dc2626;
--warn:#b45309;
--accent-on-bg:#4f46e5;
--vignette:rgba(2,6,23,.07);
--ok-text:#047351;
--warn-text:#a34b08;
--bad-text:#c11f1f;
--sunken-mix:16%;
}
:root[data-theme="meridian"]{
/* Meridian, Dark · calm teal, professional */
--bg:#0f1518;
--panel:#1b2224;
--ink:#dfe7e5;
--text:#dfe7e5;
--dim:#aab6b3;
--faint:#808a8a;
--line:rgba(148, 190, 184, 0.15);
--line2:rgba(148, 190, 184, 0.09);
--line2-dark:rgba(45,212,191,.34);
--accent:#2dd4bf;
--accent-2:#5eead4;
--accent-soft:rgba(45,212,191,.12);
--accent-text:#000000;
--sunken:#000000;
--gold:#2dd4bf;
--gold2:#5eead4;
--glow:45 212 191;
--ok:#34d399;
--bad:#f87777;
--warn:#fbbf24;
--accent-on-bg:#2dd4bf;
--vignette:rgba(0,0,0,.72);
--ok-text:#34d399;
--warn-text:#fbbf24;
--bad-text:#f87777;
--sunken-mix:42%;
}
:root[data-theme="fusion-dark"]{
/* Fusion Dark, AtomFusion · zinc + azure, dark */
--bg:#09090b;
--panel:#171719;
--ink:#fafafa;
--text:#fafafa;
--dim:#a1a1aa;
--faint:#808088;
--line:rgba(255,255,255,0.08);
--line2:rgba(255,255,255,0.05);
--line2-dark:rgba(59,130,246,.34);
--accent:#3b82f6;
--accent-2:#8b5cf6;
--accent-soft:rgba(59,130,246,.12);
--accent-text:#000000;
--sunken:#000000;
--gold:#3b82f6;
--gold2:#8b5cf6;
--glow:59 130 246;
--ok:#22c55e;
--bad:#ef4444;
--warn:#f59e0b;
--accent-on-bg:#6da2f8;
--vignette:rgba(0,0,0,.72);
--ok-text:#22c55e;
--warn-text:#f59e0b;
--bad-text:#f26363;
--sunken-mix:42%;
}
:root[data-theme="fusion-light"]{
--logo-ink:url(/assets/rocsiteai_color.png?v=2); /* light theme -> colour wordmark */
/* Fusion Light, AtomFusion · zinc + azure, light */
--bg:#fafafa;
--panel:#fdfdfd;
--ink:#09090b;
--text:#09090b;
--dim:#52525b;
--faint:#737378;
--line:rgba(0,0,0,0.08);
--line2:rgba(0,0,0,0.05);
--line2-dark:rgba(37,99,235,.28);
--accent:#2563eb;
--accent-2:#7c3aed;
--accent-soft:rgba(37,99,235,.08);
--accent-text:#ffffff;
--sunken:#bbbbbc;
--gold:#2563eb;
--gold2:#7c3aed;
--glow:37 99 235;
--ok:#16a34a;
--bad:#dc2626;
--warn:#d97706;
--accent-on-bg:#1554e0;
--vignette:rgba(2,6,23,.07);
--ok-text:#0e6c31;
--warn-text:#945104;
--bad-text:#bc1e1e;
--sunken-mix:16%;
}
/* ---------------------------------------------------------------------------
BASE TOKENS (ticket 2018). Everything above is colour; this is the rest of the
design system - type, space, shape, elevation - so a theme can own more than a
palette. On :root, which every :root[data-theme] outranks, so a theme may
override any of it.
TWO ACCENT TOKENS, on purpose, because they are two different jobs:
--accent-text (owned elsewhere) the colour that sits ON an accent fill
--accent-on-bg the accent tuned to be READ on the page background, >= 4.5:1
Both defaults below matter: with no data-theme attribute only :root applies, and
a var() that resolves to nothing makes the whole declaration invalid.
--------------------------------------------------------------------------- */
:root{
/* RocSite's own faces, taken from rocsite.com: Inter for interface, Playfair
Display for display type, JetBrains Mono for technical labels. These are
DEFAULTS - the Config font picker still overrides --font-ui per user. */
--font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--font-display:'Playfair Display',Georgia,'Times New Roman',serif;
--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
--accent-on-bg:var(--accent);
--sunken-mix:42%;
--ok-text:var(--ok); --warn-text:var(--warn,var(--accent));
--bad-text:var(--bad);
--vignette:rgba(0,0,0,.72);
--fs-micro:12px; --fs-xs:12.5px; --fs-sm:13px; --fs-body:15px;
--fs-md:16px; --fs-lg:19px; --fs-xl:24px; --fs-2xl:32px;
--lh-tight:1.25; --lh-body:1.55; --lh-loose:1.7; --tracking-label:.14em;
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
--r-sm:4px; --r-md:8px; --r-lg:14px; --r-pill:999px;
--shadow-1:0 1px 2px rgba(0,0,0,.12),0 2px 6px -2px rgba(0,0,0,.10);
--shadow-2:0 8px 24px -6px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.10);
--shadow-3:0 28px 70px -10px rgba(0,0,0,.42);
/* the house glow: a soft accent halo panels may opt into (additive token,
nothing renamed; sits beside --glow which stays the raw R G B triplet) */
--shadow-glow:0 0 22px rgb(var(--glow, 212 168 75)/.12);
/* P2-12 / #25284: browser chrome colour for .
Aliased to --bg so it follows the selected theme. Additive only. */
--theme-color: var(--bg);
/* Breakpoints are documented here so every view uses the SAME cuts.
Custom properties cannot be read inside @media, so copy the numbers:
phone 480px tablet 768px desktop 1024px
--tap-min is the WCAG 2.5.5 floor for any control a thumb has to hit. */
--bp-phone:480px; --bp-tablet:768px; --bp-desktop:1024px;
--tap-min:44px;
--motion-fast:120ms; --motion-med:220ms; --ease:var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
/* Phones are read at arm's length. The floor rises; desktop density is untouched.
Every small size is a TOKEN, so this lifts everything on the scale at once. */
@media (max-width:480px){
:root{ --fs-micro:12px; --fs-xs:12.5px; --fs-sm:13.5px; --fs-body:15.5px; --lh-body:1.6; }
}
@media (prefers-reduced-motion: reduce){
:root{ --motion-fast:0ms; --motion-med:0ms; }
}
/* House focus: a visible ring on keyboard focus, never on mouse click.
Views may restyle :focus; they must not erase :focus-visible. */
:focus-visible{
outline: 2px solid var(--accent, #d4a84b);
outline-offset: 2px;
}
:focus:not(:focus-visible){ outline: none; }