/* ============================================================ Editorial Atmosphere — Design Tokens (shared, multi-tenant) Fusion: Nexus (cinematic SaaS) × Editorial Lab (Swiss minimal) Locked 2026-05-15 (Bioclimas CRM) — extended with dark register 2026-05-23. Default register is LIGHT for backward compatibility with the locked Bioclimas spec. Apps that want dark default should set: at server render (avoid FOUC). To allow a per-user toggle, persist the chosen theme in localStorage and apply on first render. ============================================================ */ :root { /* ----- Color (LIGHT register, default) ----- */ --color-base: #FAFAF7; /* warm off-white page background */ --color-card: #FFFFFF; /* card / panel surface */ --color-hairline: #E5E5E5; /* 1px dividers — the rhythm */ --color-faint: #D4D4D4; /* placeholders, disabled, idle */ --color-text: #171717; /* near-black headings */ --color-body: #525252; /* neutral-600 body */ --color-label: #737373; /* neutral-500 mono labels */ --color-muted: #A3A3A3; /* neutral-400 idle text */ --color-accent: #0E7490; /* cyan-700 — cooling, the only accent */ --color-accent-soft: #E0F2FE; /* cyan-100 — wash backgrounds */ --color-accent-ink: #164E63; /* cyan-900 — pressed / deep */ --color-status-hi: #16A34A; /* green-600 — won, active */ --color-status-warn: #CA8A04; /* yellow-600 — nurturing, slow */ --color-status-off: #A3A3A3; /* neutral-400 — lost, idle */ --color-positive: #16A34A; --color-negative: #B91C1C; --shadow-card: 0 1px 2px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.04); --shadow-pop: 0 8px 24px -8px rgba(23, 23, 23, 0.10), 0 2px 6px rgba(23, 23, 23, 0.04); --shadow-panel: -24px 0 48px -16px rgba(23, 23, 23, 0.12); /* ----- Spacing scale (4px base) ----- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ----- Radius ----- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; /* ----- Typography ----- */ --font-display: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif; --font-serif: var(--font-instrument-serif), Georgia, serif; --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif; --font-mono: var(--font-jetbrains-mono), ui-monospace, "SF Mono", Menlo, monospace; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.08em; --tracking-widest: 0.22em; /* ----- Motion ----- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 320ms; /* ----- Z-index layers ----- */ --z-nav: 30; --z-panel: 40; --z-modal: 50; --z-toast: 60; } /* ----- DARK register ----- */ [data-theme="dark"] { --color-base: #14110D; /* warm charcoal */ --color-card: #1C1814; /* warm dark surface */ --color-hairline: #2A2521; /* 1px dividers */ --color-faint: #3A332D; /* placeholders, disabled */ --color-text: #FAFAF7; /* ivory headings */ --color-body: #C7C2BB; /* warm body text */ --color-label: #8B847C; /* mono labels */ --color-muted: #6B645E; /* idle text */ --color-accent: #22D3EE; /* cyan-400, brighter on dark */ --color-accent-soft: #164E63; /* cyan-900 wash */ --color-accent-ink: #CFFAFE; /* cyan-100 ink */ --color-status-hi: #22C55E; /* green-500 */ --color-status-warn: #EAB308; /* yellow-500 */ --color-status-off: #6B645E; --color-positive: #22C55E; --color-negative: #F87171; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-pop: 0 12px 28px -10px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-panel: -24px 0 48px -16px rgba(0, 0, 0, 0.55); } /* Honor system preference when no explicit data-theme is set (no toggle yet). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --color-base: #14110D; --color-card: #1C1814; --color-hairline: #2A2521; --color-faint: #3A332D; --color-text: #FAFAF7; --color-body: #C7C2BB; --color-label: #8B847C; --color-muted: #6B645E; --color-accent: #22D3EE; --color-accent-soft: #164E63; --color-accent-ink: #CFFAFE; --color-status-hi: #22C55E; --color-status-warn: #EAB308; --color-status-off: #6B645E; --color-positive: #22C55E; --color-negative: #F87171; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-pop: 0 12px 28px -10px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-panel: -24px 0 48px -16px rgba(0, 0, 0, 0.55); } }