/* ============================================================================ Quarter Sequence — Design Tokens (theme-aware) WHITE is the primary background; DARK is a toggle (set data-theme="dark" on ). The site imports this verbatim. Decisions 2/3/7. ---------------------------------------------------------------------------- AMDX colour = QUARTER identity, never cycle identity. Light = deeper high-chroma so the quarters pop on white (palette A). Dark = neon + glow. ============================================================================ */ /* ---- LIGHT (primary / default) ---- */ :root { --qs-theme: light; /* surfaces */ --qs-bg: #FFFFFF; --qs-bg-2: #F5F8FC; --qs-panel: #FFFFFF; --qs-panel-2: #F1F5FA; --qs-line: rgba(15,23,42,.10); --qs-line-strong: rgba(15,23,42,.20); /* text */ --qs-text: #0B1220; --qs-text-dim: #475569; --qs-text-faint: #94A3B8; /* AMDX — palette B "neon-bright" (LOCKED 2026-06-07) */ --qs-q1: #64748B; /* Accumulation — slate */ --qs-q2: #FB3A5C; /* Manipulation — bright red */ --qs-q3: #10C77B; /* Distribution — bright green */ --qs-q4: #3B82F6; /* Continuation — bright blue */ --qs-q1-soft: rgba(100,116,139,.12); --qs-q2-soft: rgba(251,58,92,.12); --qs-q3-soft: rgba(16,199,123,.12); --qs-q4-soft: rgba(59,130,246,.12); /* signature accent — fuchsia (LOCKED 2026-06-07) */ --qs-accent: #D946EF; --qs-accent-bright: #C026D3; --qs-accent-soft: rgba(217,70,239,.12); --qs-accent-glow: 0 0 0 1px rgba(217,70,239,.34), 0 6px 20px rgba(217,70,239,.24); --qs-shadow: 0 8px 28px rgba(15,23,42,.10); --qs-shadow-lg: 0 18px 50px rgba(15,23,42,.14); } /* ---- DARK (toggle) ---- */ [data-theme="dark"] { --qs-theme: dark; --qs-bg: #05070D; --qs-bg-2: #080B14; --qs-panel: #0C111C; --qs-panel-2: #111827; --qs-line: rgba(148,163,184,.16); --qs-line-strong: rgba(148,163,184,.32); --qs-text: #F2F5FA; --qs-text-dim: #9DA9C0; --qs-text-faint: #5C6781; /* AMDX — neon */ --qs-q1: #8A94A6; --qs-q2: #FF3B5C; --qs-q3: #2BFF88; --qs-q4: #4D9DFF; --qs-q1-soft: rgba(138,148,166,.14); --qs-q2-soft: rgba(255,59,92,.14); --qs-q3-soft: rgba(43,255,136,.14); --qs-q4-soft: rgba(77,157,255,.14); --qs-accent: #E879F9; --qs-accent-bright: #D946EF; --qs-accent-soft: rgba(232,121,249,.16); --qs-accent-glow: 0 0 0 1px rgba(232,121,249,.45), 0 0 22px rgba(232,121,249,.40); --qs-shadow: 0 8px 32px rgba(0,0,0,.45); --qs-shadow-lg: 0 18px 60px rgba(0,0,0,.55); } /* ---- Shared (theme-independent) ---- */ :root { /* gradients (resolve against the active theme's AMDX vars) */ --qs-amdx: linear-gradient(100deg, var(--qs-q1) 0%, var(--qs-q2) 34%, var(--qs-q3) 67%, var(--qs-q4) 100%); --qs-amdx-flow: linear-gradient(100deg, var(--qs-q1), var(--qs-q2), var(--qs-q3), var(--qs-q4), var(--qs-q1)); --qs-amdx-conic: conic-gradient(from 0deg, var(--qs-q1), var(--qs-q2), var(--qs-q3), var(--qs-q4), var(--qs-q1)); --qs-cta: var(--qs-accent-bright); /* deeper variant: white CTA text stays legible on fuchsia */ --qs-cta-hover: var(--qs-accent); --qs-success: var(--qs-q3); --qs-danger: var(--qs-q2); /* type */ --qs-display: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif; --qs-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --qs-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --qs-fs-display: clamp(2.4rem, 5vw, 4.2rem); --qs-fs-h2: clamp(1.4rem, 2.4vw, 1.9rem); --qs-fs-h3: 1.18rem; --qs-radius: 14px; --qs-radius-sm: 9px; --qs-radius-lg: 22px; --qs-ease: cubic-bezier(.22,.61,.36,1); --qs-speed: .25s; } /* CTA fill must keep white button text legible (WCAG AA) in BOTH themes. The shared default rides --qs-accent-bright, which in dark = #D946EF (white-on = 3.46:1, fails). Pin the dark CTA to the deeper #C026D3 (white-on = 4.71:1, passes). Placed after the shared :root block so it wins on source order despite equal specificity. */ [data-theme="dark"] { --qs-cta: #C026D3; } /* default page colours follow the theme */ html { background: var(--qs-bg); color: var(--qs-text); } /* animated AMDX gradient sweep — hero/heading treatment only */ @keyframes qsAmdxFlow { to { background-position: 200% center; } } .qs-amdx-text { background: var(--qs-amdx-flow); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: qsAmdxFlow 7s linear infinite; } @media (prefers-reduced-motion: reduce) { .qs-amdx-text { animation: none; } }