/* ============================================================ DOMUNN Design System — style-system.css Single source of truth for all pages. ============================================================ */ /* ── 0. Google Fonts ──────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ── 1. CSS Design Tokens ──────────────────────────────────── */ :root { /* Fonts */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: 'Lora', Georgia, serif; /* ── Backgrounds (LINE black) ── */ --bg: #000000; --bg-gradient: #000000; --panel: #0F0F0F; --card: #1A1A1A; --card-hover: #242424; --card-dark: #0A0A0A; --card-dark-2: #0F0F0F; /* ── Borders ── */ --border: rgba(255,255,255,0.08); --border-light: rgba(255,255,255,0.16); --border-glass: rgba(255,255,255,0.10); /* ── Brand / Accent Colors (LINE black + green) ── */ --brand: #06C755; --brand-hi:#05B048; --accent: #06C755; --accent-hi:#19D26A; --amber: #F59E0B; --purple: #06C755; --blue: #0EA5E9; --teal: #14B8A6; --danger: #E05050; --indigo: #06C755; --green: #06C755; /* ── Text Hierarchy ── */ --text: #FFFFFF; --muted: rgba(255,255,255,0.72); --dim: rgba(255,255,255,0.45); --ghost: rgba(255,255,255,0.18); /* Typography Scale */ --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; /* Spacing / Radius — Bento: large, rounded */ --radius-sm: 14px; --radius-md: 20px; --radius-lg: 28px; --radius-xl: 36px; --radius-pill: 999px; /* ── Shadows (soft, warm-diffused) ── */ --shadow-sm: 0 2px 14px rgba(90,65,20,0.07); --shadow-md: 0 8px 36px rgba(90,65,20,0.10), 0 2px 8px rgba(0,0,0,0.03); --shadow-lg: 0 20px 64px rgba(90,65,20,0.13), 0 4px 18px rgba(0,0,0,0.05); --shadow-float: 0 32px 80px rgba(90,65,20,0.16), 0 8px 24px rgba(0,0,0,0.06); /* ── Glassmorphism ── */ --glass-bg: rgba(255,255,255,0.65); --glass-border: 1px solid rgba(255,255,255,0.55); --glass-blur: blur(20px); /* ── UI Customizer overrides (set by JS) ── */ --ui-radius: 22px; --ui-font-size: 14px; --ui-density: 1; /* ── Legacy aliases ── */ --bg-dark: var(--bg); --bg-card: var(--card); --card-bg: var(--card); --panel-bg: var(--panel); --sidebar-bg: var(--panel); --tag-bg: rgba(232,197,71,0.15); --text-main: var(--text); --text-muted: var(--muted); --border-color: var(--border); --brand-color: var(--brand); --brand-hover: #2D2B28; --blue-color: var(--blue); --purple-color: var(--purple); --danger-color: var(--danger); --quiz-color: var(--accent); --data-green: var(--green); --gold-color: var(--accent); } /* ── 1b. Dark Mode — CSS variable overrides ───────────────── */ [data-theme="dark"] { color-scheme: dark; --bg: #07090F; --panel: #0E1117; --card: #161B24; --card-hover: #1E2535; --border: rgba(148,163,184,0.10); --border-light: rgba(99,102,241,0.45); --text: #E2E8F0; --muted: #8B98AC; --dim: #566070; --ghost: #253040; --tag-bg: rgba(99,102,241,0.18); --bg-dark: #07090F; --bg-card: #161B24; --card-bg: #161B24; --panel-bg:#0E1117; --sidebar-bg:#0E1117; } /* ── 1c. Dark Mode — comprehensive class overrides ─────────── */ /* NOTE: ui-prefs.js also injects a