/* Zygris design tokens - light + dark. Toggle sets [data-theme] on . */ :root { /* Brand */ --brand: #2563EB; --brand-600: #1D4ED8; --brand-700: #1E40AF; --accent: #7C3AED; --grad: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%); --grad-soft: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.12)); /* Surfaces (light) */ --bg: #F8FAFC; --surface: #FFFFFF; --surface-2: #F1F5F9; --surface-3: #E9EEF5; /* Text (light) */ --text: #0F172A; --text-soft: #475569; --text-muted: #94A3B8; /* Lines */ --border: #E2E8F0; --border-2: #CBD5E1; /* Status */ --success: #16A34A; --warning: #D97706; --danger: #DC2626; --star: #F59E0B; /* Radius */ --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-full: 999px; /* Shadows (light) */ --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08); --shadow: 0 6px 20px rgba(15,23,42,.08); --shadow-lg: 0 18px 50px rgba(15,23,42,.14); --ring: 0 0 0 3px rgba(37,99,235,.35); /* Type */ --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-head: 'Plus Jakarta Sans', var(--font-body); /* Layout */ --maxw: 1200px; --pad: 20px; --gap: 22px; /* Motion */ --dur: .18s; --ease: cubic-bezier(.4, 0, .2, 1); color-scheme: light; } /* Dark palette applied when toggled, or by system pref when not overridden to light. */ :root[data-theme="dark"] { --bg: #0B1220; --surface: #111B2E; --surface-2: #16233B; --surface-3: #1C2C48; --text: #E8EEFB; --text-soft: #AAB7CE; --text-muted: #6D7E9B; --border: #24324C; --border-2: #33456380; --grad-soft: linear-gradient(135deg, rgba(37,99,235,.20), rgba(124,58,237,.20)); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 26px rgba(0,0,0,.45); --shadow-lg: 0 22px 60px rgba(0,0,0,.55); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0B1220; --surface: #111B2E; --surface-2: #16233B; --surface-3: #1C2C48; --text: #E8EEFB; --text-soft: #AAB7CE; --text-muted: #6D7E9B; --border: #24324C; --border-2: #33456380; --grad-soft: linear-gradient(135deg, rgba(37,99,235,.20), rgba(124,58,237,.20)); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 26px rgba(0,0,0,.45); --shadow-lg: 0 22px 60px rgba(0,0,0,.55); color-scheme: dark; } }