/* ============================================================ LODNİ 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 (Warm Bento) ── */ --bg: #F0EAD6; --bg-gradient: linear-gradient(180deg, #FEFAF2 0%, #F8F0DC 55%, #F2E8CC 100%); --panel: #FEFCF6; --card: rgba(255,255,255,0.82); --card-hover: rgba(255,255,255,0.97); --card-dark: #1C1917; --card-dark-2: #292524; /* ── Borders ── */ --border: rgba(60,45,20,0.08); --border-light: rgba(220,180,60,0.45); --border-glass: rgba(255,255,255,0.55); /* ── Brand / Accent Colors ── */ --brand: #1A1917; --brand-hi:#2D2B28; --accent: #E8C547; --accent-hi:#F2D060; --amber: #D4900A; --purple: #A855F7; --blue: #0EA5E9; --teal: #14B8A6; --danger: #E05050; --indigo: #6366F1; --green: #22A06B; /* ── Text Hierarchy ── */ --text: #1C1917; --muted: #5C5750; --dim: #9A9188; --ghost: #D4CFC7; /* 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