/* ═══════════════════════════════════════════════════════════════════════════ tokens.css — Personica Design System Tokens All values in :root; dark mode re-declares color tokens only. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Color: Light mode ───────────────────────────────────────────────── */ --clr-bg: #FBFBFD; --clr-surface: #FFFFFF; --clr-surface-2: #F4F4F8; --clr-border: #E7E7EE; --clr-border-strong: #D1D0DC; --clr-text: #16151D; --clr-text-muted: #6B6A78; --clr-text-xmuted: #9B9AAB; /* Default accent — iris; overridden per-archetype */ --clr-accent: #574FE6; --clr-accent-dark: #3D36C0; --clr-accent-bg: #EEF0FF; /* Semantic */ --clr-success: #16A34A; --clr-warning: #CA8A04; --clr-error: #DC2626; /* ── Color: Archetype system ─────────────────────────────────────────── */ /* Set inline on by generate.mjs for archetype pages */ /* Set via JS on results page; fallback to --clr-accent */ --clr-archetype: var(--clr-accent); --clr-archetype-light: var(--clr-accent-bg); --clr-archetype-dark: var(--clr-accent-dark); /* ── Typography ──────────────────────────────────────────────────────── */ --font-display: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif; --font-body: 'Instrument Sans', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; /* Type scale */ --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 1rem; /* 16px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* Line heights */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-base: 1.6; --leading-relaxed:1.75; /* ── Spacing ─────────────────────────────────────────────────────────── */ --sp-px: 1px; --sp-0-5: 0.125rem; /* 2px */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-7: 1.75rem; /* 28px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-14: 3.5rem; /* 56px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ --sp-24: 6rem; /* 96px */ --sp-32: 8rem; /* 128px */ /* ── Radii ───────────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; /* Main card radius */ --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ── Shadows ─────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.04); --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04); --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.05); --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.10), 0 2px 6px rgb(0 0 0 / 0.05); --shadow-xl: 0 16px 40px rgb(0 0 0 / 0.12), 0 4px 8px rgb(0 0 0 / 0.06); /* ── Transitions ─────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.64, 0, 0.78, 0); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 350ms; --dur-reveal: 600ms; /* ── Layout ──────────────────────────────────────────────────────────── */ --container-max: 1200px; --container-pad: clamp(1rem, 4vw, 2rem); --nav-height: 64px; --section-py: clamp(3rem, 6vw, 5rem); /* ── Z-index ─────────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-overlay: 80; --z-drawer: 90; --z-nav: 100; --z-modal: 200; --z-toast: 300; } /* ── Dark mode ───────────────────────────────────────────────────────────── */ /* System preference (no JS) */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --clr-bg: #0C0B11; --clr-surface: #141320; --clr-surface-2: #1C1B2A; --clr-border: #272636; --clr-border-strong:#38364A; --clr-text: #EDEDF2; --clr-text-muted: #9B9AAB; --clr-text-xmuted: #6B6A78; --clr-accent: #8E86FF; --clr-accent-dark: #574FE6; --clr-accent-bg: #1E1C38; --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.3), 0 1px 2px rgb(0 0 0 / 0.2); --shadow-md: 0 4px 12px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.25); --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3); } } /* Explicit dark toggle */ [data-theme='dark'] { --clr-bg: #0C0B11; --clr-surface: #141320; --clr-surface-2: #1C1B2A; --clr-border: #272636; --clr-border-strong:#38364A; --clr-text: #EDEDF2; --clr-text-muted: #9B9AAB; --clr-text-xmuted: #6B6A78; --clr-accent: #8E86FF; --clr-accent-dark: #574FE6; --clr-accent-bg: #1E1C38; --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.3), 0 1px 2px rgb(0 0 0 / 0.2); --shadow-md: 0 4px 12px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.25); --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3); }