/* ============================================ SI9NAL Design Tokens CSS Custom Properties for Dark/Light Themes ============================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Instrument+Serif:ital@0;1&family=Space+Mono:wght@400;700&display=swap'); /* ---- Dark Theme (Default) ---- */ :root { /* Backgrounds */ --bg: #0a0a0c; --bg2: #111115; --bg3: #1a1a20; --bg4: #222230; /* Typography */ --text: #e8e6e1; --text2: #a09d96; --text3: #6b6862; /* Brand Accent */ --accent: #f04e23; --accent2: #ff6b47; --accent-glow: rgba(240, 78, 35, .15); /* Borders */ --border: #2a2a35; --border2: #3a3a48; /* Surfaces */ --card: #13131a; --card-hover: #1a1a24; --glass: rgba(10, 10, 12, .85); /* Tags */ --tag-bg: rgba(240, 78, 35, .12); --tag-text: #ff6b47; /* Elevation */ --shadow: 0 8px 32px rgba(0, 0, 0, .5); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6); /* Motion */ --transition: 0.35s cubic-bezier(.4, 0, .2, 1); --transition-fast: 0.2s cubic-bezier(.4, 0, .2, 1); --transition-slow: 0.5s cubic-bezier(.4, 0, .2, 1); /* Semantic Colors */ --green: #22c55e; --green-bg: rgba(34, 197, 94, .12); --blue: #3b82f6; --blue-bg: rgba(59, 130, 246, .12); --gold: #eab308; --gold-bg: rgba(234, 179, 8, .12); --purple: #a855f7; --purple-bg: rgba(168, 85, 247, .12); --red: #ef4444; --red-bg: rgba(239, 68, 68, .12); /* Typography Scale */ --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --font-heading: 'Instrument Serif', Georgia, serif; --font-mono: 'Space Mono', 'Fira Code', monospace; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.75rem; --fs-4xl: 3.5rem; --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.6; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Spacing Scale */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Z-index Scale */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-modal-backdrop: 500; --z-modal: 600; --z-toast: 700; --z-ticker: 800; } /* ───────────────────────────────────────────────────────────── ACCENT COLOR PRESETS The user picks one from the settings popover; we set data-accent="" on and these blocks override the accent variables. Works alongside both dark and light themes. IMPORTANT: each selector is `:root[data-accent="..."]` (not the bare attribute selector) so its specificity (0,1,1) beats the light theme block `[data-theme="light"]` (0,1,0) that comes later in this file. Without :root, the light theme would always reset --accent back to its own fallback color and the user's pick would silently have no effect in light mode. Each preset defines: --accent base brand color --accent2 lighter variant for hover / on-dark prominence --accent-glow 15% alpha for shadow / ring effects --tag-bg 12% alpha for tag backgrounds --tag-text same hue, slightly lighter for tag fg on tags ───────────────────────────────────────────────────────────── */ :root[data-accent="orange"] { --accent: #f04e23; --accent2: #ff6b47; --accent-glow: rgba(240, 78, 35, .15); --tag-bg: rgba(240, 78, 35, .12); --tag-text: #ff6b47; } :root[data-accent="crimson"] { --accent: #dc2626; --accent2: #ef4444; --accent-glow: rgba(220, 38, 38, .15); --tag-bg: rgba(220, 38, 38, .12); --tag-text: #f87171; } :root[data-accent="rose"] { --accent: #e11d48; --accent2: #f43f5e; --accent-glow: rgba(225, 29, 72, .15); --tag-bg: rgba(225, 29, 72, .12); --tag-text: #fb7185; } :root[data-accent="amber"] { --accent: #d97706; --accent2: #f59e0b; --accent-glow: rgba(217, 119, 6, .15); --tag-bg: rgba(217, 119, 6, .12); --tag-text: #fbbf24; } :root[data-accent="emerald"] { --accent: #059669; --accent2: #10b981; --accent-glow: rgba(5, 150, 105, .15); --tag-bg: rgba(5, 150, 105, .12); --tag-text: #34d399; } :root[data-accent="sky"] { --accent: #0284c7; --accent2: #0ea5e9; --accent-glow: rgba(2, 132, 199, .15); --tag-bg: rgba(2, 132, 199, .12); --tag-text: #38bdf8; } :root[data-accent="indigo"] { --accent: #4f46e5; --accent2: #6366f1; --accent-glow: rgba(79, 70, 229, .15); --tag-bg: rgba(79, 70, 229, .12); --tag-text: #818cf8; } :root[data-accent="violet"] { --accent: #7c3aed; --accent2: #8b5cf6; --accent-glow: rgba(124, 58, 237, .15); --tag-bg: rgba(124, 58, 237, .12); --tag-text: #a78bfa; } /* ---- Light Theme ---- */ [data-theme="light"] { /* Backgrounds */ --bg: #f5f2ed; --bg2: #ebe7e0; --bg3: #e0dbd3; --bg4: #d4cfc6; /* Typography */ --text: #1a1815; --text2: #5a5650; --text3: #8a867f; /* Brand Accent */ --accent: #d93a12; --accent2: #c43410; --accent-glow: rgba(217, 58, 18, .1); /* Borders */ --border: #d4cfc6; --border2: #c4bfb6; /* Surfaces */ --card: #faf8f5; --card-hover: #f0ede8; --glass: rgba(245, 242, 237, .92); /* Tags */ --tag-bg: rgba(217, 58, 18, .08); --tag-text: #c43410; /* Elevation */ --shadow: 0 8px 32px rgba(0, 0, 0, .08); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .05); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .1); /* Semantic Colors (adjusted for light bg) */ --green: #16a34a; --green-bg: rgba(22, 163, 74, .1); --blue: #2563eb; --blue-bg: rgba(37, 99, 235, .1); --gold: #ca8a04; --gold-bg: rgba(202, 138, 4, .1); --purple: #9333ea; --purple-bg: rgba(147, 51, 234, .1); --red: #dc2626; --red-bg: rgba(220, 38, 38, .1); }