/* ========================================================================== Quinkslag Design System — colors_and_type.css ========================================================================== Canonical token definitions. Two complete palettes (dark default + light sibling) plus typography. Switch modes by toggling the .theme-dark / .theme-light class on . Mode: (default) or ========================================================================== */ /* --- Web fonts (Google Fonts) ------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700;800&display=swap'); /* --- Root tokens (shared across modes) ---------------------------------- */ :root { /* Type families */ --font-serif: "DM Serif Display", Georgia, serif; --font-sans: "Inter", "Roboto", "Helvetica", "Arial", sans-serif; /* Type scale */ --fs-h1: 2.5rem; /* page title — DM Serif 400 */ --fs-h2: 2rem; /* section title — DM Serif 400 */ --fs-h3: 1.5rem; /* dialog title — DM Serif 400 */ --fs-h4: 1rem; /* card title — Inter 600 */ --fs-h5: 0.9375rem; /* subhead — Inter 600 */ --fs-body: 0.875rem; /* default body — Inter 400 */ --fs-small: 0.8125rem; /* caption */ --fs-label: 0.7rem; /* uppercase tracked label — Inter 600 */ --fs-button: 0.875rem; /* Inter 700 */ --fs-numeric: 0.875rem; /* tabular nums */ --fs-kpi: 1.875rem; /* KPI tile value — Inter 700 */ --lh-h1: 1.2; --lh-h2: 1.25; --lh-h3: 1.3; --lh-h4: 1.4; --lh-body: 1.5; --ls-h1: -0.01em; --ls-h2: -0.01em; --ls-label: 0.08em; /* table headers, section metadata */ --ls-cat: 0.10em; /* sidebar category headers */ --ls-button: 0.02em; /* Spacing scale (multiples of 4) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Radius scale — nothing exceeds 12px */ --r-chip: 4px; --r-button: 6px; --r-icon: 6px; --r-card: 8px; --r-input: 8px; --r-dialog: 12px; /* Sidebar */ --sidebar-w: 240px; /* Page-title gold underline — the visual signature */ --rule-w: 32px; --rule-h: 4px; } /* ========================================================================== DARK MODE — default. Warm charcoal canvas, bright gold accent. ========================================================================== */ .theme-dark, :root { color-scheme: dark; /* Brand — Gold */ --gold: #F5C518; --gold-light: #FFD54F; --gold-dark: #C9A200; --gold-a06: rgba(245, 197, 24, 0.06); --gold-a08: rgba(245, 197, 24, 0.08); --gold-a10: rgba(245, 197, 24, 0.10); --gold-a20: rgba(245, 197, 24, 0.20); /* Surfaces — warm, never neutral grey */ --bg: #22272F; --bg-paper: #2A303A; --bg-elevated: #323842; --bg-table-head: #1F252D; --bg-dialog: #272D36; --bg-hover: rgba(255, 255, 255, 0.05); /* Text — seven steps */ --text-primary: #F5F5F5; --text-body: #D2D8DE; --text-subtle: #A6B0B8; --text-secondary: #94A0AC; --text-muted: #78848E; --text-faint: #5E6A78; --text-dim: #4C586A; /* Borders — six steps */ --border: #353C48; --border-subtle: #303740; --border-medium: #3E4654; --border-hover: #4E5668; --border-input: #3A4250; --border-input-hover: #525E6E; /* Status */ --success: #22C55E; --success-a10: rgba(34, 197, 94, 0.10); --success-a20: rgba(34, 197, 94, 0.20); --error: #EF4444; --error-a10: rgba(239, 68, 68, 0.10); --error-a20: rgba(239, 68, 68, 0.20); --warning: #F59E0B; --warning-a10: rgba(245, 158, 11, 0.10); --warning-a20: rgba(245, 158, 11, 0.20); --info: #3B82F6; --info-a10: rgba(59, 130, 246, 0.10); --info-a20: rgba(59, 130, 246, 0.20); /* Modal-only shadow (the only real shadow in the system) */ --dialog-shadow: 0 25px 60px rgba(0, 0, 0, 0.4); /* Primary-button hover glow (very subtle) */ --gold-glow: 0 0 20px rgba(245, 197, 24, 0.20); } /* ========================================================================== LIGHT MODE — equal sibling. Warm ivory canvas, darker saturated gold. ========================================================================== */ .theme-light { color-scheme: light; /* Brand — Gold (darker for contrast on ivory) */ --gold: #B8960A; --gold-light: #F5C518; --gold-dark: #8A7008; --gold-a06: rgba(184, 150, 10, 0.06); --gold-a08: rgba(184, 150, 10, 0.08); --gold-a10: rgba(184, 150, 10, 0.10); --gold-a20: rgba(184, 150, 10, 0.20); /* Surfaces — warm paper-ivory undertone */ --bg: #F5F3EE; --bg-paper: #FFFFFF; --bg-elevated: #EDE9E2; --bg-table-head: #F0ECE5; --bg-dialog: #FFFFFF; --bg-hover: rgba(0, 0, 0, 0.04); /* Text — seven steps */ --text-primary: #1A1D21; --text-body: #2C3340; --text-subtle: #6B7580; --text-secondary: #545D68; --text-muted: #717B86; --text-faint: #949CA6; --text-dim: #B0B8C2; /* Borders */ --border: #DDD9D2; --border-subtle: #E8E4DC; --border-medium: #CFC9C0; --border-hover: #B8B2A8; --border-input: #D0CAC0; --border-input-hover: #A8A098; /* Status — slightly darker for AA on ivory */ --success: #16A34A; --success-a10: rgba(22, 163, 74, 0.10); --success-a20: rgba(22, 163, 74, 0.20); --error: #DC2626; --error-a10: rgba(220, 38, 38, 0.10); --error-a20: rgba(220, 38, 38, 0.20); --warning: #D97706; --warning-a10: rgba(217, 119, 6, 0.10); --warning-a20: rgba(217, 119, 6, 0.20); --info: #2563EB; --info-a10: rgba(37, 99, 235, 0.10); --info-a20: rgba(37, 99, 235, 0.20); --dialog-shadow: 0 25px 60px rgba(0, 0, 0, 0.12); --gold-glow: 0 0 20px rgba(184, 150, 10, 0.20); } /* ========================================================================== Base typography — apply to in any prototype. ========================================================================== */ html, body { background: var(--bg); color: var(--text-body); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; } h1, .qs-h1 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); color: var(--text-primary); margin: 0; } h2, .qs-h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: var(--text-primary); margin: 0; } h3, .qs-h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-primary); margin: 0; } h4, .qs-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--text-primary); margin: 0; } h5, .qs-h5 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h5); color: var(--text-primary); margin: 0; } /* The signature texture — uppercase tracked label */ .qs-label { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--text-muted); } .qs-category { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-cat); color: var(--text-muted); } /* Tabular numbers — use on every numeric column */ .qs-num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* The page-title gold underline — visual signature of every page */ .qs-page-rule { display: block; width: var(--rule-w); height: var(--rule-h); background: var(--gold); margin: var(--sp-3) 0 0 0; border: 0; } /* Selection */ ::selection { background: var(--gold-a20); color: var(--text-primary); }