/* Hamdam design tokens — generated from design/tokens/ */ /* Google Fonts loaded via in base.html for earlier discovery */ /* ============================================================ COLORS Hamdam palettes (terracotta default) + light/dark modes. Consume via CSS variables. Switch at runtime with . ============================================================ */ :root { /* Palette: Terracotta (default) */ --bg: oklch(0.972 0.012 75); --surface: oklch(0.992 0.008 78); --surface-2: oklch(0.955 0.014 72); --ink: oklch(0.235 0.025 50); --ink-soft: oklch(0.38 0.025 55); --muted: oklch(0.55 0.022 60); --line: oklch(0.88 0.015 65); --line-soft: oklch(0.93 0.012 70); --accent: oklch(0.585 0.135 42); /* terracotta */ --accent-ink: oklch(0.98 0.01 70); --accent-2: oklch(0.46 0.075 130); /* olive */ --warning: oklch(0.72 0.13 75); --success: oklch(0.55 0.10 145); --danger: oklch(0.58 0.16 28); } /* ---- Palette: Olive (modern-grant: clean, neutral, forest accent) ---- */ [data-palette="olive"] { --bg: oklch(0.985 0.005 130); --surface: oklch(0.998 0.003 130); --surface-2: oklch(0.955 0.008 130); --ink: oklch(0.20 0.015 140); --ink-soft: oklch(0.38 0.018 135); --muted: oklch(0.54 0.018 135); --line: oklch(0.88 0.010 130); --line-soft: oklch(0.93 0.008 130); --accent: oklch(0.45 0.085 140); --accent-ink: oklch(0.99 0.005 130); --accent-2: oklch(0.55 0.10 60); } /* ---- Palette: Indigo (institutional) ---- */ [data-palette="indigo"] { --bg: oklch(0.975 0.008 250); --surface: oklch(0.995 0.005 250); --surface-2: oklch(0.955 0.012 245); --ink: oklch(0.20 0.028 265); --ink-soft: oklch(0.38 0.028 260); --muted: oklch(0.55 0.022 260); --line: oklch(0.88 0.015 255); --line-soft: oklch(0.93 0.012 255); --accent: oklch(0.42 0.14 265); --accent-2: oklch(0.52 0.10 195); } /* ---- Palette: Mulberry (heritage: parchment, wine, gold) ---- */ [data-palette="mulberry"] { --bg: oklch(0.962 0.012 68); --surface: oklch(0.985 0.008 65); --surface-2: oklch(0.940 0.016 65); --ink: oklch(0.22 0.025 30); --ink-soft: oklch(0.40 0.030 30); --muted: oklch(0.55 0.024 35); --line: oklch(0.86 0.020 50); --line-soft: oklch(0.91 0.014 55); --accent: oklch(0.42 0.12 355); --accent-ink: oklch(0.98 0.01 60); --accent-2: oklch(0.58 0.105 75); } /* ---- Dark mode ---- */ [data-mode="dark"] { --bg: oklch(0.18 0.012 60); --surface: oklch(0.215 0.014 60); --surface-2: oklch(0.255 0.014 60); --ink: oklch(0.96 0.012 75); --ink-soft: oklch(0.82 0.014 70); --muted: oklch(0.65 0.018 65); --line: oklch(0.32 0.015 60); --line-soft: oklch(0.28 0.012 60); --accent: oklch(0.68 0.135 45); --accent-2: oklch(0.62 0.085 130); } [data-mode="dark"][data-palette="indigo"] { --bg: oklch(0.17 0.018 265); --surface: oklch(0.21 0.022 265); --surface-2: oklch(0.25 0.024 265); --line: oklch(0.32 0.022 265); --line-soft: oklch(0.28 0.018 265); --accent: oklch(0.66 0.14 265); --accent-2: oklch(0.66 0.10 195); } [data-mode="dark"][data-palette="olive"] { --bg: oklch(0.17 0.010 140); --surface: oklch(0.21 0.012 140); --surface-2: oklch(0.25 0.014 140); --line: oklch(0.32 0.014 140); --line-soft: oklch(0.28 0.012 140); --accent: oklch(0.66 0.10 140); --accent-2: oklch(0.70 0.10 60); } [data-mode="dark"][data-palette="mulberry"] { --bg: oklch(0.18 0.018 25); --surface: oklch(0.215 0.020 25); --surface-2: oklch(0.255 0.022 25); --line: oklch(0.32 0.020 25); --line-soft: oklch(0.28 0.016 25); --accent: oklch(0.66 0.14 355); --accent-2: oklch(0.72 0.10 75); } /* ============================================================ TYPOGRAPHY Editorial pairing (Instrument Serif + Geist) by default. Three alternate pairings ship behind . Note: Geist is not on Google Fonts; system-ui fallback is used. ============================================================ */ :root { --font-display: "Instrument Serif", "Newsreader", Georgia, serif; --font-body: "Geist", "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; } /* ---- Alt pairings ---- */ [data-fontpair="editorial"] { --font-display: "Instrument Serif", Georgia, serif; --font-body: "Geist", system-ui, sans-serif; } [data-fontpair="modern"] { --font-display: "Geist", system-ui, sans-serif; --font-body: "Geist", system-ui, sans-serif; } [data-fontpair="classic"] { --font-display: "Newsreader", "Source Serif Pro", Georgia, serif; --font-body: "Newsreader", Georgia, serif; } [data-fontpair="grotesk"] { --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Space Grotesk", system-ui, sans-serif; } /* ---- Editorial bake-off: Cyrillic-first serifs ---- */ [data-fontpair="editorial-pt-serif"] { --font-display: "PT Serif", "Palatino Linotype", Georgia, serif; --font-body: "Geist", system-ui, sans-serif; } [data-fontpair="editorial-lora"] { --font-display: "Lora", "Palatino Linotype", Georgia, serif; --font-body: "Geist", system-ui, sans-serif; } [data-fontpair="editorial-alegreya"] { --font-display: "Alegreya", "Palatino Linotype", Georgia, serif; --font-body: "Geist", system-ui, sans-serif; } [data-fontpair="editorial-andada"] { --font-display: "Andada Pro", "Palatino Linotype", Georgia, serif; --font-body: "Geist", system-ui, sans-serif; } [data-fontpair="editorial-old-standard"] { --font-display: "Old Standard TT", "Palatino Linotype", Georgia, serif; --font-body: "Geist", system-ui, sans-serif; } [data-fontpair="editorial-literata"] { --font-display: "Literata", "Palatino Linotype", Georgia, serif; --font-body: "Geist", system-ui, sans-serif; } [data-fontpair^="editorial-"] h1, [data-fontpair^="editorial-"] h2, [data-fontpair^="editorial-"] h3 { letter-spacing: -0.005em; } [data-fontpair^="editorial-"] h1 { letter-spacing: -0.01em; } /* ---- Heading defaults ---- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.012em; margin: 0; color: var(--ink); } h1 { font-size: clamp(40px, 5.5vw, 84px); line-height: 1.02; letter-spacing: -0.02em; } h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.08; } h3 { font-size: clamp(20px, 1.6vw, 26px); line-height: 1.2; } h4 { font-size: 17px; line-height: 1.3; font-family: var(--font-body); font-weight: 600; letter-spacing: -0.005em; } /* ============================================================ SPACING, RADII, SHADOWS, DENSITY Spacing scale is density-aware: switch with . ============================================================ */ :root { /* Spacing scale (px). Default "comfy". */ --pad-1: 6px; --pad-2: 12px; --pad-3: 18px; --pad-4: 28px; --pad-5: 44px; --pad-6: 72px; /* Radii */ --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-pill: 999px; /* Shadows — warm, low elevation by default */ --shadow-sm: 0 1px 2px oklch(0.2 0.02 60 / 0.05), 0 1px 0 oklch(0.2 0.02 60 / 0.02); --shadow-md: 0 8px 24px -8px oklch(0.25 0.05 50 / 0.12), 0 2px 6px -2px oklch(0.25 0.05 50 / 0.06); --shadow-lg: 0 24px 60px -20px oklch(0.25 0.05 50 / 0.22), 0 8px 18px -8px oklch(0.25 0.05 50 / 0.10); } /* ---- Density modifiers ---- */ [data-density="compact"] { --pad-2: 8px; --pad-3: 12px; --pad-4: 20px; --pad-5: 32px; --pad-6: 52px; } [data-density="spacious"] { --pad-2: 14px; --pad-3: 22px; --pad-4: 36px; --pad-5: 56px; --pad-6: 92px; }