/* Mobius -- AWOL Design System tokens --------------------------------------------------------------------------- Source of truth: Alan's "AWOL Design System" project on claude.ai/design, pulled 2026-08-07 (post-"liquid" push: short tone names, pastels, the three locked gradient families, liquid glass). Fonts are SELF-HOSTED -- the DS ships a Google Fonts @import, which the artifact CSP and CLAUDE.md forbid. Dark is the DS default; index.html always writes data-theme before paint. This file must stay pure ASCII (artifact build hard-fails otherwise). 1 @font-face 2 type 3 the Eight + tones + pastels 4 neutrals 5 semantic dark 6 gradients (three families) 7 glass 8 radii/space/shadow/motion 9 app layout 10 light theme 11 back-compat aliases 12 axis colour maps --------------------------------------------------------------------------- */ /* ---------- 1. fonts ---------- */ @font-face{font-family:"Archivo";src:url("../fonts/archivo-var.woff2") format("woff2");font-weight:300 700;font-stretch:100%;font-display:swap} @font-face{font-family:"Source Serif 4";src:url("../fonts/source-serif-4-var.woff2") format("woff2");font-weight:300 700;font-display:swap} @font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-var.woff2") format("woff2");font-weight:100 800;font-display:swap} :root{ /* ---------- 2. type ---------- */ --font-display:"Source Serif 4",Georgia,"Times New Roman",serif; --font-sans:"Archivo","Helvetica Neue",Arial,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; --text-display-xl:clamp(56px,7vw,84px); --text-display-lg:clamp(44px,5.5vw,64px); --text-display:clamp(34px,4vw,48px); --text-h1:34px; --text-h2:26px; --text-h3:21px; --text-body-lg:18px; --text-body:16px; --text-body-sm:14px; --text-caption:12.5px; --text-mono:13px; /* app-local: the DS scale bottoms out at 12.5px; the mono meta rows need two smaller steps. Replaces the ad-hoc 9/10/11px sizes previously inline. */ --text-eyebrow:11px; --text-micro:10px; --leading-display:1.06; --leading-heading:1.18; --leading-body:1.6; --leading-tight:1.35; --tracking-display:-.022em; --tracking-heading:-.012em; --tracking-body:0; --tracking-caps:.08em; --weight-display:480; --weight-display-light:380; --weight-heading:520; --weight-body:400; --weight-medium:500; --weight-semibold:600; /* ---------- 3a. the Eight -- base values VERBATIM and sacred ---------- */ --awol-identity:#FFFFFF; --awol-insight:#404040; --awol-leadership:#F82820; --awol-team:#FF8000; --awol-operations:#0888F0; --awol-marketing:#7840E0; --awol-sales:#FFC000; --awol-finance:#18A850; /* ---------- 3b. function tones -- DS short names are canonical now ------ Values verbatim from tokens/colors.css (the 2026-08-07 re-derivation). The old --awol--bright long forms alias these in section 11. */ --leadership-bright:#ff5347; --leadership-deep:#c31c16; --leadership-dim:rgba(248,40,32,.14); --leadership-tint:#fdeae8; --team-bright:#ff9a33; --team-deep:#c96400; --team-dim:rgba(255,128,0,.14); --team-tint:#fff0e0; --operations-bright:#4aa9f5; --operations-deep:#0668b8; --operations-dim:rgba(8,136,240,.14); --operations-tint:#e6f2fd; --marketing-bright:#9d6ff0; --marketing-deep:#5a2bb4; --marketing-dim:rgba(120,64,224,.14); --marketing-tint:#f0e9fc; --sales-bright:#ffd147; --sales-deep:#c49200; --sales-dim:rgba(255,192,0,.16); --sales-tint:#fff6da; --finance-bright:#2fc46e; --finance-deep:#0f7d3a; --finance-dim:rgba(24,168,80,.14); --finance-tint:#e4f6ea; --insight-dim:rgba(64,64,64,.35); --insight-tint:#ededed; /* app-local identity/insight tones the DS dropped -- the [data-fn] family map in section 12 still needs a full set for all eight functions */ --identity-bright:#ffffff; --identity-deep:#c3c3c3; --identity-dim:rgba(255,255,255,.14); --identity-tint:#ffffff; --insight-bright:#797979; --insight-deep:#313131; /* pastel band -- milky top notes for the dream melts */ --leadership-pastel:#ffb7b0; --team-pastel:#ffcf9e; --operations-pastel:#a3d3fb; --marketing-pastel:#cbb2f6; --sales-pastel:#ffe491; --finance-pastel:#a5e3bf; /* ---------- 4. neutrals ---------- */ --black-0:#050506; --black-1:#0a0a0b; --black-2:#101013; --black-3:#16161a; --black-4:#1d1d22; --black-5:#26262c; --white-0:#ffffff; --white-1:#fafaf9; --white-2:#f4f4f2; --white-3:#ececea; --white-4:#e2e2df; /* ---------- 5. semantic -- DARK (DS default) ---------- */ --bg-0:var(--black-1); --bg-1:var(--black-2); --surface-1:var(--black-3); --surface-2:var(--black-4); --surface-3:var(--black-5); --text-1:#f5f5f3; --text-2:rgba(245,245,243,.68); --text-3:rgba(245,245,243,.52); /* APP TUNING: DS ships .45 = 4.22:1 on surface-1. .52 = 5.24:1. Revert to .45 for DS-verbatim. */ --text-invert:#121214; --border-1:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.16); --border-focus:var(--awol-operations); --accent:var(--awol-identity); --accent-text:var(--text-invert); --accent-hover:#e8e8e5; /* a solid accent can't "raise a step" */ --link:var(--operations-bright); --link-hover:#7cc0f8; --select-bg:rgba(8,136,240,.32); --scrim:rgba(5,5,6,.6); --shadow-1:0 1px 2px rgba(0,0,0,.28); --shadow-2:0 4px 14px rgba(0,0,0,.32); --shadow-3:0 16px 48px rgba(0,0,0,.42); --shadow-float:0 1px 2px rgba(0,0,0,.30),0 12px 32px rgba(0,0,0,.38); --glow-ops:0 0 44px rgba(8,136,240,.28); --glow-mkt:0 0 44px rgba(120,64,224,.28); --glow-ember:0 0 44px rgba(255,128,0,.22); /* app-local surface intents the DS has no name for: a recessed track (kanban column, calendar gutter, note block, image slot) and a hover raise. Recessed always goes DOWN, away from the card. */ --sunken:var(--bg-1); --hover:var(--surface-2); /* DS semantic state tokens -- the classic traffic lights */ --ok:var(--awol-finance);--warn:var(--awol-sales);--danger:var(--awol-leadership);--info:var(--awol-operations); --ok-dim:var(--finance-dim);--warn-dim:var(--sales-dim); --danger-dim:var(--leadership-dim);--info-dim:var(--operations-dim); /* ---------- 6. gradients -- the three locked families (2026-08-07) ------ FAMILY 1 signature fields (editorial only, never app chrome) */ --gradient-aurora:radial-gradient(120% 140% at 85% 10%,rgba(120,64,224,.85) 0%,rgba(8,136,240,.60) 38%,transparent 72%); --gradient-ember:radial-gradient(110% 130% at 12% 88%,rgba(248,40,32,.72) 0%,rgba(255,128,0,.54) 40%,transparent 74%); --gradient-signal:radial-gradient(120% 130% at 80% 90%,rgba(24,168,80,.68) 0%,rgba(8,136,240,.50) 45%,transparent 76%); --gradient-solar:radial-gradient(110% 120% at 15% 10%,rgba(255,192,0,.62) 0%,rgba(255,128,0,.42) 42%,transparent 74%); --gradient-spectrum:linear-gradient(90deg,#f82820,#ff8000,#ffc000,#18a850,#0888f0,#7840e0); --gradient-spectrum-soft:linear-gradient(115deg,rgba(248,40,32,.32),rgba(255,128,0,.28) 20%,rgba(255,192,0,.24) 38%,rgba(24,168,80,.26) 56%,rgba(8,136,240,.32) 76%,rgba(120,64,224,.36)); --gradient-veil:linear-gradient(180deg,transparent 0%,var(--bg-0) 92%); /* FAMILY 3 function glow -- one geometry, two volumes. mono-* = ambient app-chrome negative space (layer at .45-.60 opacity), hero-* = statement (near-opaque core) */ --gradient-mono-leadership:radial-gradient(95% 85% at 50% 110%,rgba(248,40,32,.55) 0%,rgba(248,40,32,.40) 30%,rgba(255,83,71,.20) 55%,rgba(255,83,71,.06) 74%,transparent 88%); --gradient-mono-team:radial-gradient(95% 85% at 50% 110%,rgba(255,128,0,.53) 0%,rgba(255,128,0,.38) 30%,rgba(255,154,51,.19) 55%,rgba(255,154,51,.06) 74%,transparent 88%); --gradient-mono-operations:radial-gradient(95% 85% at 50% 110%,rgba(8,136,240,.55) 0%,rgba(8,136,240,.40) 30%,rgba(74,169,245,.20) 55%,rgba(74,169,245,.06) 74%,transparent 88%); --gradient-mono-marketing:radial-gradient(95% 85% at 50% 110%,rgba(120,64,224,.56) 0%,rgba(120,64,224,.41) 30%,rgba(157,111,240,.21) 55%,rgba(157,111,240,.06) 74%,transparent 88%); --gradient-mono-sales:radial-gradient(95% 85% at 50% 110%,rgba(255,192,0,.50) 0%,rgba(255,192,0,.36) 30%,rgba(255,209,71,.18) 55%,rgba(255,209,71,.05) 74%,transparent 88%); --gradient-mono-finance:radial-gradient(95% 85% at 50% 110%,rgba(24,168,80,.53) 0%,rgba(24,168,80,.38) 30%,rgba(47,196,110,.19) 55%,rgba(47,196,110,.06) 74%,transparent 88%); /* app-local mono extensions (2026-08-08 redesign): the accent picker can now drive the ambient field, so the two chassis accents need mono ramps too. insight = grey glow; iridescent = the dream's multi-hue melt in the mono bottom-anchored geometry (identity accent maps to it, like the dreams). */ --gradient-mono-insight:radial-gradient(95% 85% at 50% 110%,rgba(126,126,134,.50) 0%,rgba(126,126,134,.36) 30%,rgba(202,202,208,.18) 55%,rgba(202,202,208,.05) 74%,transparent 88%); --gradient-mono-iridescent:radial-gradient(70% 80% at 22% 112%,rgba(8,136,240,.40) 0%,rgba(74,169,245,.18) 55%,transparent 80%),radial-gradient(70% 80% at 78% 112%,rgba(255,183,176,.34) 0%,rgba(255,183,176,.12) 55%,transparent 80%),radial-gradient(95% 85% at 50% 110%,rgba(120,64,224,.46) 0%,rgba(120,64,224,.30) 30%,rgba(203,178,246,.16) 55%,rgba(203,178,246,.05) 74%,transparent 88%); --gradient-hero-leadership:radial-gradient(95% 85% at 50% 110%,rgba(248,40,32,1) 0%,rgba(248,40,32,.78) 30%,rgba(255,83,71,.40) 55%,rgba(255,83,71,.12) 74%,transparent 88%); --gradient-hero-team:radial-gradient(95% 85% at 50% 110%,rgba(255,128,0,1) 0%,rgba(255,128,0,.76) 30%,rgba(255,154,51,.38) 55%,rgba(255,154,51,.11) 74%,transparent 88%); --gradient-hero-operations:radial-gradient(95% 85% at 50% 110%,rgba(8,136,240,1) 0%,rgba(8,136,240,.78) 30%,rgba(74,169,245,.40) 55%,rgba(74,169,245,.12) 74%,transparent 88%); --gradient-hero-marketing:radial-gradient(95% 85% at 50% 110%,rgba(120,64,224,1) 0%,rgba(120,64,224,.78) 30%,rgba(157,111,240,.40) 55%,rgba(157,111,240,.12) 74%,transparent 88%); --gradient-hero-sales:radial-gradient(95% 85% at 50% 110%,rgba(255,192,0,1) 0%,rgba(255,192,0,.74) 30%,rgba(255,209,71,.36) 55%,rgba(255,209,71,.11) 74%,transparent 88%); --gradient-hero-finance:radial-gradient(95% 85% at 50% 110%,rgba(24,168,80,1) 0%,rgba(24,168,80,.76) 30%,rgba(47,196,110,.38) 55%,rgba(47,196,110,.11) 74%,transparent 88%); /* FAMILY 2 dream fields ("melted ice cream") -- sit on --dream-base. Media slots, sheet heroes, modal headers, empty states. */ --dream-base:var(--black-3); --gradient-dream-leadership:radial-gradient(120% 100% at 80% -10%,rgba(255,83,71,.78) 0%,transparent 66%),radial-gradient(100% 90% at 0% 25%,rgba(248,40,32,.55) 0%,transparent 64%),radial-gradient(150% 120% at 55% 122%,rgba(255,183,176,.48) 0%,transparent 72%),linear-gradient(160deg,rgba(248,40,32,.34) 0%,rgba(255,183,176,.14) 100%); --gradient-dream-team:radial-gradient(120% 100% at 80% -10%,rgba(255,154,51,.78) 0%,transparent 66%),radial-gradient(100% 90% at 0% 25%,rgba(255,128,0,.55) 0%,transparent 64%),radial-gradient(150% 120% at 55% 122%,rgba(255,207,158,.48) 0%,transparent 72%),linear-gradient(160deg,rgba(255,128,0,.34) 0%,rgba(255,207,158,.14) 100%); --gradient-dream-operations:radial-gradient(120% 100% at 80% -10%,rgba(74,169,245,.78) 0%,transparent 66%),radial-gradient(100% 90% at 0% 25%,rgba(8,136,240,.55) 0%,transparent 64%),radial-gradient(150% 120% at 55% 122%,rgba(163,211,251,.48) 0%,transparent 72%),linear-gradient(160deg,rgba(8,136,240,.34) 0%,rgba(163,211,251,.14) 100%); --gradient-dream-marketing:radial-gradient(120% 100% at 80% -10%,rgba(157,111,240,.78) 0%,transparent 66%),radial-gradient(100% 90% at 0% 25%,rgba(120,64,224,.55) 0%,transparent 64%),radial-gradient(150% 120% at 55% 122%,rgba(203,178,246,.48) 0%,transparent 72%),linear-gradient(160deg,rgba(120,64,224,.34) 0%,rgba(203,178,246,.14) 100%); --gradient-dream-sales:radial-gradient(120% 100% at 80% -10%,rgba(255,209,71,.80) 0%,transparent 66%),radial-gradient(100% 90% at 0% 25%,rgba(255,192,0,.58) 0%,transparent 64%),radial-gradient(150% 120% at 55% 122%,rgba(255,228,145,.50) 0%,transparent 72%),linear-gradient(160deg,rgba(255,192,0,.36) 0%,rgba(255,228,145,.15) 100%); --gradient-dream-finance:radial-gradient(120% 100% at 80% -10%,rgba(47,196,110,.78) 0%,transparent 66%),radial-gradient(100% 90% at 0% 25%,rgba(24,168,80,.55) 0%,transparent 64%),radial-gradient(150% 120% at 55% 122%,rgba(165,227,191,.48) 0%,transparent 72%),linear-gradient(160deg,rgba(24,168,80,.34) 0%,rgba(165,227,191,.14) 100%); --gradient-dream-iridescent:radial-gradient(105% 95% at 85% 0%,rgba(163,211,251,.70) 0%,transparent 64%),radial-gradient(95% 95% at 12% 30%,rgba(203,178,246,.60) 0%,transparent 66%),radial-gradient(125% 105% at 70% 115%,rgba(255,183,176,.42) 0%,transparent 68%),radial-gradient(85% 75% at 30% -10%,rgba(255,228,145,.34) 0%,transparent 62%),linear-gradient(160deg,rgba(120,64,224,.26) 0%,rgba(8,136,240,.12) 100%); --gradient-dream-identity:var(--gradient-dream-iridescent); --gradient-dream-insight:radial-gradient(120% 100% at 80% -10%,rgba(126,126,134,.72) 0%,transparent 66%),radial-gradient(100% 90% at 0% 25%,rgba(64,64,64,.52) 0%,transparent 64%),radial-gradient(150% 120% at 55% 122%,rgba(202,202,208,.44) 0%,transparent 72%),linear-gradient(160deg,rgba(64,64,64,.30) 0%,rgba(202,202,208,.12) 100%); /* the app's ambient field: mono glow in the chrome's negative space. Consumers paint it on a layer with opacity .5-.6 (2-base.css). */ --field:var(--gradient-mono-marketing); /* ---------- 7. liquid glass -- legal over gradients/imagery only ------- */ --glass-bg:rgba(22,22,26,.44); --glass-bg-strong:rgba(22,22,26,.62); --glass-border:rgba(255,255,255,.16); --glass-highlight:inset 0 1px 0 rgba(255,255,255,.10); --blur-glass:saturate(1.4) blur(18px); --blur-glass-heavy:saturate(1.8) blur(32px); color-scheme:dark; /* ---------- 8. radii . spacing . motion . focus ---------- */ --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-2xl:36px; --radius-pill:999px; --border-w:1px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px; --space-10:40px; --space-12:48px; --space-14:56px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px; --ease-out:cubic-bezier(.22,.61,.36,1); --ease-in-out:cubic-bezier(.65,.05,.36,1); --dur-fast:120ms; --dur-med:200ms; --dur-slow:320ms; --ring:0 0 0 2px var(--bg-0),0 0 0 4px var(--awol-operations); --press:scale(.985); /* ---------- 9. app-local layout ---------- */ --pad:clamp(var(--space-4),3vw,var(--space-12)); --topbar-h:56px; --controls-h:52px; --side-w:244px; /* sidebar width; 64px when collapsed */ --gap:var(--space-4); --container-lg:1200px; /* --ar and --n are written inline by JS; consumers carry fallbacks */ } /* ---------- 10. semantic -- LIGHT ---------- */ [data-theme="light"]{ --bg-0:var(--white-1); --bg-1:var(--white-0); --surface-1:var(--white-0); --surface-2:var(--white-2); --surface-3:var(--white-3); --text-1:#141416; --text-2:rgba(20,20,22,.66); --text-3:rgba(20,20,22,.58); /* APP TUNING: DS ships .44 = 2.88:1 on white. .58 = 4.48:1. Revert to .44 for DS-verbatim. */ --text-invert:#f8f8f7; --border-1:rgba(16,16,19,.10); --border-2:rgba(16,16,19,.18); --accent:#141416; --accent-text:#f8f8f7; --accent-hover:#2a2a2e; --link:#0668b8; --link-hover:var(--awol-operations); --select-bg:var(--operations-tint); --scrim:rgba(16,16,19,.4); --shadow-1:0 1px 2px rgba(18,18,20,.06); --shadow-2:0 6px 20px rgba(18,18,20,.08); --shadow-3:0 24px 64px rgba(18,18,20,.12); --shadow-float:0 1px 2px rgba(18,18,20,.05),0 10px 32px rgba(18,18,20,.10); --sunken:var(--white-2); --hover:var(--white-2); /* light-theme traffic lights use the -deep tones: the verbatim brights fail contrast as text on white (sales #FFC000 on white is 1.6:1) */ --ok:#0f7d3a;--warn:#c49200;--danger:#c31c16;--info:#0668b8; --ok-dim:var(--finance-tint);--warn-dim:var(--sales-tint); --danger-dim:var(--leadership-tint);--info-dim:var(--operations-tint); /* gradients: light recipes verbatim from tokens/effects.css */ --gradient-aurora:radial-gradient(120% 140% at 85% 10%,rgba(120,64,224,.34) 0%,rgba(8,136,240,.26) 38%,transparent 72%); --gradient-ember:radial-gradient(110% 130% at 12% 88%,rgba(248,40,32,.26) 0%,rgba(255,128,0,.20) 40%,transparent 74%); --gradient-signal:radial-gradient(120% 130% at 80% 90%,rgba(24,168,80,.26) 0%,rgba(8,136,240,.20) 45%,transparent 76%); --gradient-solar:radial-gradient(110% 120% at 15% 10%,rgba(255,192,0,.30) 0%,rgba(255,128,0,.20) 42%,transparent 74%); --gradient-spectrum-soft:linear-gradient(115deg,rgba(248,40,32,.16),rgba(255,128,0,.14) 20%,rgba(255,192,0,.12) 38%,rgba(24,168,80,.14) 56%,rgba(8,136,240,.16) 76%,rgba(120,64,224,.18)); --gradient-mono-leadership:radial-gradient(95% 85% at 50% 110%,rgba(248,40,32,.30) 0%,rgba(248,40,32,.20) 30%,rgba(255,83,71,.10) 55%,rgba(255,83,71,.03) 74%,transparent 88%); --gradient-mono-team:radial-gradient(95% 85% at 50% 110%,rgba(255,128,0,.28) 0%,rgba(255,128,0,.19) 30%,rgba(255,154,51,.09) 55%,rgba(255,154,51,.03) 74%,transparent 88%); --gradient-mono-operations:radial-gradient(95% 85% at 50% 110%,rgba(8,136,240,.30) 0%,rgba(8,136,240,.20) 30%,rgba(74,169,245,.10) 55%,rgba(74,169,245,.03) 74%,transparent 88%); --gradient-mono-marketing:radial-gradient(95% 85% at 50% 110%,rgba(120,64,224,.30) 0%,rgba(120,64,224,.20) 30%,rgba(157,111,240,.10) 55%,rgba(157,111,240,.03) 74%,transparent 88%); --gradient-mono-sales:radial-gradient(95% 85% at 50% 110%,rgba(255,192,0,.32) 0%,rgba(255,192,0,.21) 30%,rgba(255,209,71,.10) 55%,rgba(255,209,71,.03) 74%,transparent 88%); --gradient-mono-finance:radial-gradient(95% 85% at 50% 110%,rgba(24,168,80,.28) 0%,rgba(24,168,80,.19) 30%,rgba(47,196,110,.09) 55%,rgba(47,196,110,.03) 74%,transparent 88%); --gradient-mono-insight:radial-gradient(95% 85% at 50% 110%,rgba(126,126,134,.26) 0%,rgba(126,126,134,.18) 30%,rgba(202,202,208,.09) 55%,rgba(202,202,208,.03) 74%,transparent 88%); --gradient-mono-iridescent:radial-gradient(70% 80% at 22% 112%,rgba(8,136,240,.20) 0%,rgba(74,169,245,.09) 55%,transparent 80%),radial-gradient(70% 80% at 78% 112%,rgba(255,183,176,.18) 0%,rgba(255,183,176,.06) 55%,transparent 80%),radial-gradient(95% 85% at 50% 110%,rgba(120,64,224,.24) 0%,rgba(120,64,224,.16) 30%,rgba(203,178,246,.08) 55%,rgba(203,178,246,.03) 74%,transparent 88%); --gradient-hero-leadership:radial-gradient(95% 85% at 50% 110%,rgba(248,40,32,.85) 0%,rgba(248,40,32,.52) 30%,rgba(255,83,71,.26) 55%,rgba(255,83,71,.08) 74%,transparent 88%); --gradient-hero-team:radial-gradient(95% 85% at 50% 110%,rgba(255,128,0,.80) 0%,rgba(255,128,0,.48) 30%,rgba(255,154,51,.24) 55%,rgba(255,154,51,.08) 74%,transparent 88%); --gradient-hero-operations:radial-gradient(95% 85% at 50% 110%,rgba(8,136,240,.82) 0%,rgba(8,136,240,.50) 30%,rgba(74,169,245,.25) 55%,rgba(74,169,245,.08) 74%,transparent 88%); --gradient-hero-marketing:radial-gradient(95% 85% at 50% 110%,rgba(120,64,224,.82) 0%,rgba(120,64,224,.50) 30%,rgba(157,111,240,.25) 55%,rgba(157,111,240,.08) 74%,transparent 88%); --gradient-hero-sales:radial-gradient(95% 85% at 50% 110%,rgba(255,192,0,.84) 0%,rgba(255,192,0,.50) 30%,rgba(255,209,71,.25) 55%,rgba(255,209,71,.08) 74%,transparent 88%); --gradient-hero-finance:radial-gradient(95% 85% at 50% 110%,rgba(24,168,80,.80) 0%,rgba(24,168,80,.48) 30%,rgba(47,196,110,.24) 55%,rgba(47,196,110,.08) 74%,transparent 88%); --dream-base:var(--white-0); --gradient-dream-leadership:radial-gradient(115% 95% at 80% -10%,rgba(255,183,176,.85) 0%,transparent 64%),radial-gradient(95% 85% at 0% 25%,rgba(255,83,71,.36) 0%,transparent 60%),radial-gradient(150% 120% at 55% 122%,rgba(255,183,176,.55) 0%,transparent 70%); --gradient-dream-team:radial-gradient(115% 95% at 80% -10%,rgba(255,207,158,.85) 0%,transparent 64%),radial-gradient(95% 85% at 0% 25%,rgba(255,154,51,.36) 0%,transparent 60%),radial-gradient(150% 120% at 55% 122%,rgba(255,207,158,.55) 0%,transparent 70%); --gradient-dream-operations:radial-gradient(115% 95% at 80% -10%,rgba(163,211,251,.85) 0%,transparent 64%),radial-gradient(95% 85% at 0% 25%,rgba(74,169,245,.36) 0%,transparent 60%),radial-gradient(150% 120% at 55% 122%,rgba(163,211,251,.55) 0%,transparent 70%); --gradient-dream-marketing:radial-gradient(115% 95% at 80% -10%,rgba(203,178,246,.85) 0%,transparent 64%),radial-gradient(95% 85% at 0% 25%,rgba(157,111,240,.36) 0%,transparent 60%),radial-gradient(150% 120% at 55% 122%,rgba(203,178,246,.55) 0%,transparent 70%); --gradient-dream-sales:radial-gradient(115% 95% at 80% -10%,rgba(255,228,145,.88) 0%,transparent 64%),radial-gradient(95% 85% at 0% 25%,rgba(255,209,71,.38) 0%,transparent 60%),radial-gradient(150% 120% at 55% 122%,rgba(255,228,145,.58) 0%,transparent 70%); --gradient-dream-finance:radial-gradient(115% 95% at 80% -10%,rgba(165,227,191,.85) 0%,transparent 64%),radial-gradient(95% 85% at 0% 25%,rgba(47,196,110,.36) 0%,transparent 60%),radial-gradient(150% 120% at 55% 122%,rgba(165,227,191,.55) 0%,transparent 70%); --gradient-dream-iridescent:radial-gradient(100% 90% at 85% 0%,rgba(163,211,251,.66) 0%,transparent 62%),radial-gradient(90% 90% at 12% 30%,rgba(203,178,246,.55) 0%,transparent 64%),radial-gradient(120% 100% at 70% 115%,rgba(255,183,176,.30) 0%,transparent 66%),radial-gradient(80% 70% at 30% -10%,rgba(255,228,145,.26) 0%,transparent 60%); --gradient-dream-identity:var(--gradient-dream-iridescent); --gradient-dream-insight:radial-gradient(115% 95% at 80% -10%,rgba(202,202,208,.85) 0%,transparent 64%),radial-gradient(95% 85% at 0% 25%,rgba(126,126,134,.34) 0%,transparent 60%),radial-gradient(150% 120% at 55% 122%,rgba(202,202,208,.55) 0%,transparent 70%); --glass-bg:rgba(255,255,255,.55); --glass-bg-strong:rgba(255,255,255,.74); --glass-border:rgba(255,255,255,.60); --glass-highlight:inset 0 1px 0 rgba(255,255,255,.55); color-scheme:light; } /* ---------- 11. back-compat aliases ---------------------------------------- These exist so 2-base / 3-cards / 4-views keep working through renames. New rules should use the DS name on the right. --sunken and --hover are NOT aliases -- they're declared per theme above, because the DS's --surface-2 is *lighter* than surface-1 in dark, the wrong direction for a recessed track. */ :root,[data-theme="light"]{ --display:var(--font-display); --sans:var(--font-sans); --mono:var(--font-mono); --bg:var(--bg-0); --card:var(--surface-1); --line:var(--border-1); --line-2:var(--border-2); --ink:var(--text-1); --ink-2:var(--text-2); --ink-3:var(--text-3); --on-ink:var(--accent-text); --accent-bg:var(--select-bg); --scrim-bg:var(--scrim); /* pre-2026-08-07 long-form tone names -> DS short names */ --awol-identity-bright:var(--identity-bright); --awol-identity-deep:var(--identity-deep); --awol-identity-dim:var(--identity-dim); --awol-identity-tint:var(--identity-tint); --awol-insight-bright:var(--insight-bright); --awol-insight-deep:var(--insight-deep); --awol-insight-dim:var(--insight-dim); --awol-insight-tint:var(--insight-tint); --awol-leadership-bright:var(--leadership-bright); --awol-leadership-deep:var(--leadership-deep); --awol-leadership-dim:var(--leadership-dim); --awol-leadership-tint:var(--leadership-tint); --awol-team-bright:var(--team-bright); --awol-team-deep:var(--team-deep); --awol-team-dim:var(--team-dim); --awol-team-tint:var(--team-tint); --awol-operations-bright:var(--operations-bright); --awol-operations-deep:var(--operations-deep); --awol-operations-dim:var(--operations-dim); --awol-operations-tint:var(--operations-tint); --awol-marketing-bright:var(--marketing-bright); --awol-marketing-deep:var(--marketing-deep); --awol-marketing-dim:var(--marketing-dim); --awol-marketing-tint:var(--marketing-tint); --awol-sales-bright:var(--sales-bright); --awol-sales-deep:var(--sales-deep); --awol-sales-dim:var(--sales-dim); --awol-sales-tint:var(--sales-tint); --awol-finance-bright:var(--finance-bright); --awol-finance-deep:var(--finance-deep); --awol-finance-dim:var(--finance-dim); --awol-finance-tint:var(--finance-tint); --r-sm:var(--radius-sm); --r-md:var(--radius-md); --r-lg:var(--radius-lg); --r-xl:var(--radius-xl); --r-full:var(--radius-pill); --sh-1:var(--shadow-1); --sh-2:var(--shadow-2); --sh-3:var(--shadow-3); --d1:var(--dur-fast); --d2:var(--dur-med); --d3:var(--dur-slow); --ease:var(--ease-out); } /* ---------- 12a. function colour family ------------------------------------ JS writes data-fn=""; that element and its subtree then resolve --c / --c-bright / --c-deep / --c-dim / --c-tint / --c-dream / --c-on. Settings can remap channels/pillars/campaigns onto any of the Eight; the attribute writer in 00-core is the only place that decides the fn. --c-on encodes a measured fact: white text fails AA on six of the Eight (leadership 3.95, team 2.52, operations 3.63, sales 1.64, finance 3.11), so only insight and marketing take white. Nothing in this app puts text on a solid fill, but the rule is encoded rather than remembered. */ [data-fn="identity"] {--c:var(--awol-identity); --c-bright:var(--identity-bright); --c-deep:var(--identity-deep); --c-dim:var(--identity-dim); --c-tint:var(--identity-tint); --c-dream:var(--gradient-dream-identity); --c-on:#141416} [data-fn="insight"] {--c:var(--awol-insight); --c-bright:var(--insight-bright); --c-deep:var(--insight-deep); --c-dim:var(--insight-dim); --c-tint:var(--insight-tint); --c-dream:var(--gradient-dream-insight); --c-on:#ffffff} [data-fn="leadership"]{--c:var(--awol-leadership);--c-bright:var(--leadership-bright);--c-deep:var(--leadership-deep);--c-dim:var(--leadership-dim);--c-tint:var(--leadership-tint);--c-dream:var(--gradient-dream-leadership);--c-on:#141416} [data-fn="team"] {--c:var(--awol-team); --c-bright:var(--team-bright); --c-deep:var(--team-deep); --c-dim:var(--team-dim); --c-tint:var(--team-tint); --c-dream:var(--gradient-dream-team); --c-on:#141416} [data-fn="operations"]{--c:var(--awol-operations);--c-bright:var(--operations-bright);--c-deep:var(--operations-deep);--c-dim:var(--operations-dim);--c-tint:var(--operations-tint);--c-dream:var(--gradient-dream-operations);--c-on:#141416} [data-fn="marketing"] {--c:var(--awol-marketing); --c-bright:var(--marketing-bright); --c-deep:var(--marketing-deep); --c-dim:var(--marketing-dim); --c-tint:var(--marketing-tint); --c-dream:var(--gradient-dream-marketing); --c-on:#ffffff} [data-fn="sales"] {--c:var(--awol-sales); --c-bright:var(--sales-bright); --c-deep:var(--sales-deep); --c-dim:var(--sales-dim); --c-tint:var(--sales-tint); --c-dream:var(--gradient-dream-sales); --c-on:#141416} [data-fn="finance"] {--c:var(--awol-finance); --c-bright:var(--finance-bright); --c-deep:var(--finance-deep); --c-dim:var(--finance-dim); --c-tint:var(--finance-tint); --c-dream:var(--gradient-dream-finance); --c-on:#141416} /* ---------- 12b. status colour --------------------------------------------- Classic traffic lights (Alan's spec, confirmed by the DS scheduler kit's ok/warn/muted status lines). --sc is separate from --c so one element can carry channel colour AND status colour with no collision. Built-in, not user-editable (Alan's call, 2026-08-07). idea not started -> muted draft not ready -> red review needs eyes -> yellow approved good to go -> green published live -> green + check (the "posted" treatment) */ [data-status="idea"] {--sc:var(--text-3);--sc-dim:var(--surface-2)} [data-status="draft"] {--sc:var(--danger);--sc-dim:var(--danger-dim)} [data-status="review"] {--sc:var(--warn);--sc-dim:var(--warn-dim)} [data-status="approved"] {--sc:var(--ok);--sc-dim:var(--ok-dim)} [data-status="published"]{--sc:var(--ok);--sc-dim:var(--ok-dim)} /* ---------- 13. accent override (Settings, 2026-08-08) --------------------- Alan can pick any of the Eight as the app's action colour (buttons, the selected-state outline stays Operations per the DS's own "interaction colour" rule -- only the SOLID accent fill moves). No data-accent, or data-accent="chassis", keeps the DS default: white accent in dark, near -black in light. --c-on's measured per-function contrast decides the text colour riding on top of the fill. This block is appended last on purpose -- same specificity as the theme blocks above, so declaration order wins. 2026-08-08 redesign: the accent also drives the ambient FIELD (Home's Customize popover and Settings share meta.accentColor). identity keeps the white accent fill but takes the iridescent field, mirroring how its dream resolves to the iridescent melt. No data-accent = marketing field default (declared in section 6). */ [data-accent="leadership"]{--accent:var(--awol-leadership);--accent-text:#141416;--accent-hover:var(--leadership-deep);--field:var(--gradient-mono-leadership)} [data-accent="team"] {--accent:var(--awol-team); --accent-text:#141416;--accent-hover:var(--team-deep);--field:var(--gradient-mono-team)} [data-accent="operations"]{--accent:var(--awol-operations);--accent-text:#141416;--accent-hover:var(--operations-deep);--field:var(--gradient-mono-operations)} [data-accent="marketing"] {--accent:var(--awol-marketing); --accent-text:#ffffff;--accent-hover:var(--marketing-deep);--field:var(--gradient-mono-marketing)} [data-accent="sales"] {--accent:var(--awol-sales); --accent-text:#141416;--accent-hover:var(--sales-deep);--field:var(--gradient-mono-sales)} [data-accent="finance"] {--accent:var(--awol-finance); --accent-text:#141416;--accent-hover:var(--finance-deep);--field:var(--gradient-mono-finance)} [data-accent="insight"] {--accent:var(--awol-insight); --accent-text:#ffffff;--accent-hover:var(--insight-deep);--field:var(--gradient-mono-insight)} [data-accent="identity"] {--accent:var(--awol-identity); --accent-text:#141416;--accent-hover:#e8e8e5;--field:var(--gradient-mono-iridescent)} /* identity means "the chassis default", which is THEME-dependent: white in dark, near-black in light. Without this, a light theme + identity accent painted white-on-white fills (the invisible today circle). Higher specificity, so it may live inside this last block without reordering. */ [data-theme="light"][data-accent="identity"]{--accent:#141416;--accent-text:#f8f8f7;--accent-hover:#2a2a2e}