/* ============================================================ dmswift — Paper & Sweep Layer 1 · ink (read) — near-black / validated pairs, never gradient Layer 2 · light (felt) — blurred pastel, never behind body copy ============================================================ */ :root { color-scheme: light dark; /* ---------- 1 · brand hues, sampled left→right off brand/logo-source.png ---------- DECORATIVE ONLY. These six may fill, stroke, blur and glow. They may never be a `color:` value. Use --on-* for that. */ --h-sky: #46B6F5; --h-indigo: #5B6CF0; --h-violet: #8A5CF0; --h-pink: #E8479E; --h-coral: #F65C5C; --h-amber: #FBA13C; /* ---------- 2 · gradients. Exactly four. ---------- RULE OF THREE: the 6-stop --sweep only ever runs along a LONG THIN path (wordmark, hairline, underline, progress rail, 3px card edge) where each hue gets room. Any AREA fill uses --sweep-3. Any surface carrying white TEXT uses --grad-cta. Any TEXT filled by a gradient uses --grad-display. */ --ang: 135deg; /* [dir=rtl] flips this to 225deg */ --sweep: linear-gradient(96deg, #46B6F5 0%, #5B6CF0 17%, #8A5CF0 33%, #E8479E 57%, #F65C5C 78%, #FBA13C 100%); --sweep-3: linear-gradient(var(--ang), #5B6CF0 0%, #8A5CF0 50%, #E8479E 100%); /* white label clears 4.5:1 at EVERY point. Measured every 12.5%: 7.38 7.28 7.12 6.94 6.74 6.63 6.45 6.21 5.85 → minimum 5.85:1 */ --grad-cta: linear-gradient(var(--ang), #4A3AD4 0%, #7A2FD0 52%, #B32A86 100%); --grad-cta-h: linear-gradient(var(--ang), #4133C4 0%, #6A2BD9 52%, #9E2578 100%); /* the sweep, deepened until every interpolated point clears AA for NORMAL text. worst interpolated stop #C2413A = 4.87:1 on --paper. Used ONLY for background-clip:text on display type. */ --grad-display: linear-gradient(100deg, #1E6AD6 0%, #4B3BDD 22%, #7A2FD0 42%, #B32A86 64%, #C2413A 84%, #9A6108 100%); /* hairline rule, masked to fade at both ends */ --grad-hair: linear-gradient(90deg, #5B6CF0, #8A5CF0 40%, #E8479E 72%, #FBA13C); /* ---------- 3 · surfaces (paper) ---------- */ --paper: #FAF9FB; /* page canvas — warm off-white with a violet cast */ --paper-2: #F4F2F8; /* alternating band, recessed panel, preview rail */ --paper-3: #ECE9F2; /* pressed / segmented track / skeleton base */ --card: #FFFFFF; --card-2: #FBFAFD; /* input fill, inset block, code block */ --rule: #E8E4F0; /* hairline — decorative separation only */ --rule-2: #D7D1E4; /* emphasised hairline */ --field: #9288AC; /* INPUT / CONTROL border. 3.31:1 on card, 3.16 on paper — clears WCAG 2.2 §1.4.11 non-text contrast. */ /* ---------- 4 · ink ---------- */ --ink: #16131F; /* 17.44:1 on paper · 18.31 on card · 16.48 on paper-2 */ --ink-2: #4A4458; /* 8.86:1 on paper · 9.30 on card · 8.37 on paper-2 (AAA) */ --ink-3: #655E72; /* 5.89:1 on paper · 6.18 on card · 5.15 on paper-3 (AA everywhere) */ --on-color: #FFFFFF; /* ---------- 5 · accent ---------- */ --accent: #7A2FD0; /* icons, fills, focus. white on it = 6.68:1 */ --accent-ink: #6A2BD9; /* accent TEXT + links. 7.09 on card · 6.76 on paper · 6.09 on accent-soft */ --accent-2: #8A5CF0; /* hover fill */ --accent-3: #5B2BC4; /* pressed fill. white = 8.12:1 */ --accent-soft: #F0EBFE; --accent-line: #C9B4F6; --focus: #6A2BD9; --ring: rgba(122, 47, 208, .22); /* ---------- 6 · pastel pairs. Every tint ships its own legible ink. ---------- */ --tint-sky: #E8F5FE; --on-sky: #0F5C86; /* 6.54 on tint · 6.91 on paper */ --tint-violet: #F0EBFE; --on-violet: #5B2BC4; /* 6.96 on tint · 7.73 on paper */ --tint-pink: #FDEAF3; --on-pink: #A81E63; /* 6.02 on tint · 6.60 on paper */ --tint-amber: #FEF1E3; --on-amber: #94510B; /* 5.49 on tint · 5.81 on paper */ --tint-mint: #E4F6EE; --on-mint: #0F6B47; /* 5.82 on tint · 6.22 on paper */ --tint-coral: #FDEBEA; --on-coral: #B32B24; /* 5.55 on tint · 6.09 on paper */ /* ---------- 7 · semantic — aliases of the pairs, so there is ONE truth ---------- */ --ok: var(--on-mint); --ok-soft: var(--tint-mint); /* white on #0F6B47 = 6.53 */ --warn: var(--on-amber); --warn-soft: var(--tint-amber); /* white on #94510B = 6.10 */ --err: var(--on-coral); --err-soft: var(--tint-coral); /* white on #B32B24 = 6.39 */ --info: var(--on-sky); --info-soft: var(--tint-sky); /* white on #0F5C86 = 7.25 */ /* ---------- 8 · highlighter pen — decorative, sits BEHIND --ink text ---------- --ink on every pen ≥ 12.9:1. Never place --ink-3 on a pen. */ --pen-violet: #E0D2FF; --pen-mint: #CFF0E2; --pen-amber: #FCE6C3; --pen-pink: #FBD7E7; --pen-sky: #D3EBFB; /* ---------- 9 · charts. All chart marks sit on --card. ---------- Categorical order is FIXED: violet → mint → sky → pink → amber. Validated: lightness band PASS, chroma PASS, CVD adjacent separation PASS, every colour ≥3:1 on --card (5.59 / 4.10 / 4.05 / 4.32 / 3.36). Reordering breaks CVD separation — do not reorder. */ --cat-1: #6B46F0; --cat-2: #0B8F63; --cat-3: #2280DC; --cat-4: #DE2F86; --cat-5: #C87A12; /* single-series bar: one hue, 12% self-lighten. No false encoding. 3.83:1 top → 5.59:1 bottom, both clear the 3:1 non-text bar. */ --chart-bar: linear-gradient(180deg, #8A6BF4 0%, #6B46F0 100%); --chart-bar-hi: linear-gradient(180deg, #7A2FD0 0%, #B32A86 100%); /* 6.68 / 5.85 */ --chart-track: #ECE9F2; --chart-grid: #EDE9F3; /* SOLID hairlines only — never dashed */ /* ---------- 10 · light (the felt layer) ---------- Max 3 hues per composition; a 4th turns the blend muddy. */ --wash-a: #46B6F5; --wash-b: #8A5CF0; --wash-c: #E8479E; --wash-d: #FBA13C; --wash-alpha: .30; --wash-blur: 70px; --dot: rgba(122, 47, 208, .085); /* 22px dot-grid texture */ /* ---------- 11 · glass — chrome only ---------- .78 in light is the measured floor: over the most saturated thing that can scroll under the nav, --ink-2 still reads 5.76:1. */ --glass: rgba(255, 255, 255, .78); --glass-solid: #FBFAFD; /* @supports-not fallback */ --glass-border: rgba(255, 255, 255, .72); --glass-blur: blur(16px) saturate(150%); --scrim: rgba(22, 19, 31, .42); /* ---------- 12 · elevation — tinted ink-violet, never black ---------- */ --sh-1: 0 1px 2px rgba(32, 22, 62, .04), 0 4px 14px rgba(32, 22, 62, .05); --sh-2: 0 2px 6px rgba(32, 22, 62, .05), 0 14px 34px rgba(32, 22, 62, .08); --sh-3: 0 10px 24px rgba(32, 22, 62, .08), 0 34px 72px rgba(32, 22, 62, .13); --sh-cta: 0 8px 22px -6px rgba(122, 47, 208, .42); --sh-cta-h: 0 14px 34px -8px rgba(122, 47, 208, .52); --sh-glow: 0 6px 30px rgba(138, 92, 240, .26); /* under the hero wordmark only */ /* ---------- 13 · shape ---------- */ --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-lg: 20px; --r-xl: 30px; --r-pill: 999px; /* ---------- 14 · space ---------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px; --s10: 144px; /* ---------- 15 · motion ---------- */ --ease: cubic-bezier(.22, 1, .36, 1); /* editorial glide — the default */ --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* chips, toggles, checks */ --ease-inout: cubic-bezier(.4, 0, .2, 1); --t-fast: 140ms; --t: 240ms; --t-slow: 520ms; --t-reveal: 700ms; --t-drift: 28s; /* ---------- 16 · layout ---------- */ --max: 1160px; --max-txt: 720px; /* editorial measure ≈ 68ch */ --nav-h: 68px; --gutter: clamp(18px, 4.2vw, 40px); } /* RTL: mirror every diagonal so gradients travel with the reading direction */ [dir="rtl"] { --ang: 225deg; } /* ============================================================ Dark — deep plum-black paper, not grey. --sweep / --sweep-3 keep their light-mode hexes so the logo and the sweep are the same object in both themes. The two blocks below are byte-identical (§4 — CSS has no way to share them): the explicit switch wins; the OS preference is the fallback. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0D0A12; --paper-2: #131020; --paper-3: #1B1626; --card: #17131E; --card-2: #1E1929; --rule: #2A2436; --rule-2: #3A3348; --field: #6E6790; /* 3.49:1 on card, 3.27 on card-2 */ --ink: #F2EFF7; /* 17.27:1 on paper · 16.08 on card */ --ink-2: #BDB6CC; /* 10.03:1 on paper · 9.34 on card (AAA) */ --ink-3: #A19AB4; /* 7.29:1 on paper · 6.79 on card · 6.36 on card-2 */ --accent: #A78BFA; --accent-ink: #C4A6FF; /* 8.92 on card · 9.58 on paper */ --accent-2: #C4A6FF; --accent-3: #8A5CF0; --accent-soft: rgba(167, 139, 250, .14); --accent-line: rgba(167, 139, 250, .38); --focus: #C4A6FF; --ring: rgba(167, 139, 250, .38); /* white label min 4.79:1 across the whole run (measured every 12.5%: 5.93 5.86 5.83 5.68 5.55 5.47 5.29 5.08 4.79) */ --grad-cta: linear-gradient(var(--ang), #5B49E6 0%, #8B3BE0 52%, #C43A94 100%); --grad-cta-h: linear-gradient(var(--ang), #6A59F0 0%, #9A4BEC 52%, #D4499F 100%); /* worst interpolated stop 7.22:1 on --paper — gradient headlines are AAA in dark */ --grad-display: linear-gradient(100deg, #7FC4FF 0%, #A78BFA 30%, #F8A0CB 58%, #FBA98C 80%, #FBC97A 100%); /* tints become washes; the ink becomes the light 300-level. Measured against the composited tint over --card. */ --tint-sky: rgba(70,182,245,.13); --on-sky: #8FD3FA; /* 9.08 on tint · 11.20 on card */ --tint-violet: rgba(138,92,240,.15); --on-violet: #C4A6FF; /* 7.61 · 8.92 */ --tint-pink: rgba(232,71,158,.14); --on-pink: #F8A0CB; /* 8.14 · 9.48 */ --tint-amber: rgba(251,161,60,.14); --on-amber: #F6C077; /* 8.62 · 11.08 */ --tint-mint: rgba(79,179,146,.14); --on-mint: #7FD9B4; /* 8.83 · 10.87 */ --tint-coral: rgba(246,92,92,.14); --on-coral: #F79B96; /* 7.40 · 8.78 */ --pen-violet: rgba(167,139,250,.30); /* --ink on it = 9.48 */ --pen-mint: rgba(79,179,146,.28); /* 9.77 */ --pen-amber: rgba(251,161,60,.26); /* 9.46 */ --pen-pink: rgba(232,71,158,.26); /* 11.51 */ --pen-sky: rgba(70,182,245,.26); /* categorical re-stepped for the dark card — NOT an auto-flip. ≥3:1 on --card: 4.62 / 6.03 / 5.61 / 5.18 / 5.91. CVD separation PASS. */ --cat-1: #8A66F5; --cat-2: #14A87C; --cat-3: #3593E4; --cat-4: #E0559C; --cat-5: #C4862B; --chart-bar: linear-gradient(180deg, #8A66F5 0%, #6E5AA8 100%); /* 4.62 / 3.21 */ --chart-bar-hi: linear-gradient(180deg, #C4A6FF 0%, #8A66F5 100%); /* 8.92 / 4.62 */ --chart-track: #251F33; --chart-grid: #241E33; --wash-alpha: .22; --wash-blur: 84px; --dot: rgba(196, 166, 255, .07); --glass: rgba(23, 19, 30, .80); /* measured floor: --ink-2 = 5.24:1 worst case */ --glass-solid: #1A1622; --glass-border: rgba(255, 255, 255, .08); --scrim: rgba(6, 4, 10, .62); --sh-1: 0 1px 2px rgba(0, 0, 0, .32); --sh-2: 0 10px 28px rgba(0, 0, 0, .44); --sh-3: 0 18px 54px rgba(0, 0, 0, .58); --sh-cta: 0 8px 24px -6px rgba(139, 59, 224, .48); --sh-cta-h: 0 14px 36px -8px rgba(139, 59, 224, .58); --sh-glow: 0 6px 34px rgba(167, 139, 250, .32); } } :root[data-theme="dark"] { --paper: #0D0A12; --paper-2: #131020; --paper-3: #1B1626; --card: #17131E; --card-2: #1E1929; --rule: #2A2436; --rule-2: #3A3348; --field: #6E6790; /* 3.49:1 on card, 3.27 on card-2 */ --ink: #F2EFF7; /* 17.27:1 on paper · 16.08 on card */ --ink-2: #BDB6CC; /* 10.03:1 on paper · 9.34 on card (AAA) */ --ink-3: #A19AB4; /* 7.29:1 on paper · 6.79 on card · 6.36 on card-2 */ --accent: #A78BFA; --accent-ink: #C4A6FF; /* 8.92 on card · 9.58 on paper */ --accent-2: #C4A6FF; --accent-3: #8A5CF0; --accent-soft: rgba(167, 139, 250, .14); --accent-line: rgba(167, 139, 250, .38); --focus: #C4A6FF; --ring: rgba(167, 139, 250, .38); /* white label min 4.79:1 across the whole run (measured every 12.5%: 5.93 5.86 5.83 5.68 5.55 5.47 5.29 5.08 4.79) */ --grad-cta: linear-gradient(var(--ang), #5B49E6 0%, #8B3BE0 52%, #C43A94 100%); --grad-cta-h: linear-gradient(var(--ang), #6A59F0 0%, #9A4BEC 52%, #D4499F 100%); /* worst interpolated stop 7.22:1 on --paper — gradient headlines are AAA in dark */ --grad-display: linear-gradient(100deg, #7FC4FF 0%, #A78BFA 30%, #F8A0CB 58%, #FBA98C 80%, #FBC97A 100%); /* tints become washes; the ink becomes the light 300-level. Measured against the composited tint over --card. */ --tint-sky: rgba(70,182,245,.13); --on-sky: #8FD3FA; /* 9.08 on tint · 11.20 on card */ --tint-violet: rgba(138,92,240,.15); --on-violet: #C4A6FF; /* 7.61 · 8.92 */ --tint-pink: rgba(232,71,158,.14); --on-pink: #F8A0CB; /* 8.14 · 9.48 */ --tint-amber: rgba(251,161,60,.14); --on-amber: #F6C077; /* 8.62 · 11.08 */ --tint-mint: rgba(79,179,146,.14); --on-mint: #7FD9B4; /* 8.83 · 10.87 */ --tint-coral: rgba(246,92,92,.14); --on-coral: #F79B96; /* 7.40 · 8.78 */ --pen-violet: rgba(167,139,250,.30); /* --ink on it = 9.48 */ --pen-mint: rgba(79,179,146,.28); /* 9.77 */ --pen-amber: rgba(251,161,60,.26); /* 9.46 */ --pen-pink: rgba(232,71,158,.26); /* 11.51 */ --pen-sky: rgba(70,182,245,.26); /* categorical re-stepped for the dark card — NOT an auto-flip. ≥3:1 on --card: 4.62 / 6.03 / 5.61 / 5.18 / 5.91. CVD separation PASS. */ --cat-1: #8A66F5; --cat-2: #14A87C; --cat-3: #3593E4; --cat-4: #E0559C; --cat-5: #C4862B; --chart-bar: linear-gradient(180deg, #8A66F5 0%, #6E5AA8 100%); /* 4.62 / 3.21 */ --chart-bar-hi: linear-gradient(180deg, #C4A6FF 0%, #8A66F5 100%); /* 8.92 / 4.62 */ --chart-track: #251F33; --chart-grid: #241E33; --wash-alpha: .22; --wash-blur: 84px; --dot: rgba(196, 166, 255, .07); --glass: rgba(23, 19, 30, .80); /* measured floor: --ink-2 = 5.24:1 worst case */ --glass-solid: #1A1622; --glass-border: rgba(255, 255, 255, .08); --scrim: rgba(6, 4, 10, .62); --sh-1: 0 1px 2px rgba(0, 0, 0, .32); --sh-2: 0 10px 28px rgba(0, 0, 0, .44); --sh-3: 0 18px 54px rgba(0, 0, 0, .58); --sh-cta: 0 8px 24px -6px rgba(139, 59, 224, .48); --sh-cta-h: 0 14px 36px -8px rgba(139, 59, 224, .58); --sh-glow: 0 6px 34px rgba(167, 139, 250, .32); } /* ============================================================ ALIAS LAYER — legacy names re-pointed at Paper & Sweep values. Delete style.css:6-112 and landing.css:12-145; keep the rest. ============================================================ */ :root { /* ---- style.css (dashboard) ---- */ --bg: var(--paper); --surface: var(--card); --surface-2: var(--paper-2); --surface-3: var(--paper-3); --border: var(--rule); --border-2: var(--rule-2); --text: var(--ink); --muted: var(--ink-2); --faint: var(--ink-3); --accent-text: var(--accent-ink); --accent-ring: var(--ring); /* --accent, --accent-2, --accent-3, --accent-soft, --ok, --ok-soft, --err, --err-soft, --warn, --warn-soft are already defined above under the same names — nothing to alias. */ --btn-bg: var(--accent); --btn-bg-h: var(--accent-ink); --btn-bg-a: var(--accent-3); --purple: var(--on-violet); --purple-soft: var(--tint-violet); --tint-blue: var(--tint-sky); --tint-blue-b: var(--rule); --tint-green: var(--tint-mint); --tint-green-b: var(--rule); --tint-amber-b: var(--rule); /* --tint-amber already exists */ --tint-purple: var(--tint-violet); --tint-purple-b: var(--rule); --bar: var(--chart-bar); --bar-today: var(--chart-bar-hi); --sh-card: var(--sh-1); --sh-pop: var(--sh-3); --t: var(--t-fast) var(--ease); /* ---- landing.css legacy (kept only until landing.css is rewritten) ---- */ --di-bg: var(--paper); --di-bg-alt: var(--paper-2); --di-surface: var(--card); --di-surface-2: var(--paper-2); --di-surface-3: var(--paper-3); --di-border: var(--rule); --di-border-2: var(--rule-2); --di-text: var(--ink); --di-muted: var(--ink-2); --di-faint: var(--ink-3); --di-accent: var(--accent); --di-accent-2: var(--accent-2); --di-accent-3: var(--h-violet); --di-accent-text: var(--accent-ink); --di-accent-soft: var(--accent-soft); --di-ring: var(--ring); --di-btn: var(--accent); --di-btn-h: var(--accent-ink); --di-btn-a: var(--accent-3); --di-ok: var(--ok); --di-ok-soft: var(--ok-soft); --di-grad: var(--grad-cta); --di-grad-soft: var(--sweep-3); --di-s1: var(--s1); --di-s2: var(--s2); --di-s3: var(--s3); --di-s4: var(--s4); --di-s5: var(--s5); --di-s6: var(--s6); --di-s7: var(--s7); --di-s8: var(--s8); --di-r-xs: var(--r-xs); --di-r-sm: var(--r-sm); --di-r: var(--r); --di-r-lg: var(--r-lg); --di-r-xl: var(--r-xl); --di-r-pill: var(--r-pill); --di-sh-1: var(--sh-1); --di-sh-2: var(--sh-2); --di-sh-3: var(--sh-3); --di-sh-accent: var(--sh-cta); --di-ease: var(--ease); --di-t: var(--t-fast) var(--ease); --di-max: var(--max); --di-nav-h: var(--nav-h); }