/* Mikraot design themes — sharp / minimal / professional. Applied via Staging-only until promoted. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Hebrew:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap'); :root, html[data-theme="light"] { color-scheme: light; --bg: #f4f5f7; --surface: #ffffff; --surface-2: #eef0f3; --surface-soft: #fafbfc; --ink: #111827; --ink-2: #374151; --ink-muted: #6b7280; --muted: #6b7280; --muted-2: #9ca3af; --hair: #e5e7eb; --hair-strong: #d1d5db; --border: #d1d5db; --shadow: none; --shadow-soft: 0 1px 0 rgba(17, 24, 39, 0.04); --shadow-modal: 0 16px 40px rgba(17, 24, 39, 0.16); --success: #047857; --info: #1d4ed8; --warn: #b45309; --error: #b91c1c; --font-ui: 'IBM Plex Sans Hebrew', 'Assistant', 'Segoe UI', sans-serif; --font-he: 'IBM Plex Sans Hebrew', 'Assistant', 'David', sans-serif; --font-en: 'Source Serif 4', 'Georgia', serif; --font-read: 'Source Serif 4', 'Frank Ruhl Libre', 'David', serif; } html[data-theme="dark"] { color-scheme: dark; --bg: #0b0f14; --surface: #121821; --surface-2: #1a222d; --surface-soft: #0f141b; --ink: #e8edf4; --ink-2: #c5ced9; --ink-muted: #8b97a8; --muted: #8b97a8; --muted-2: #6b7788; --hair: #243041; --hair-strong: #2f3e52; --border: #2f3e52; --shadow: none; --shadow-soft: 0 1px 0 rgba(0, 0, 0, 0.35); --shadow-modal: 0 18px 48px rgba(0, 0, 0, 0.55); --success: #34d399; --info: #60a5fa; --warn: #fbbf24; --error: #f87171; } /* Accent families */ html[data-accent="ink"] { --accent: #111827; --accent-2: #111827; --accent-strong: #000000; --accent-contrast: #ffffff; --accent-soft: rgba(17, 24, 39, 0.08); } html[data-theme="dark"][data-accent="ink"] { --accent: #e8edf4; --accent-2: #e8edf4; --accent-strong: #ffffff; --accent-contrast: #0b0f14; --accent-soft: rgba(232, 237, 244, 0.12); } html[data-accent="slate"] { --accent: #334155; --accent-2: #334155; --accent-strong: #1e293b; --accent-contrast: #ffffff; --accent-soft: rgba(51, 65, 85, 0.10); } html[data-theme="dark"][data-accent="slate"] { --accent: #94a3b8; --accent-2: #94a3b8; --accent-strong: #cbd5e1; --accent-contrast: #0b0f14; --accent-soft: rgba(148, 163, 184, 0.14); } html[data-accent="teal"] { --accent: #0f766e; --accent-2: #0f766e; --accent-strong: #115e59; --accent-contrast: #ffffff; --accent-soft: rgba(15, 118, 110, 0.10); } html[data-theme="dark"][data-accent="teal"] { --accent: #2dd4bf; --accent-2: #2dd4bf; --accent-strong: #5eead4; --accent-contrast: #042f2e; --accent-soft: rgba(45, 212, 191, 0.14); } html[data-accent="burgundy"] { --accent: #7f1d1d; --accent-2: #7f1d1d; --accent-strong: #450a0a; --accent-contrast: #ffffff; --accent-soft: rgba(127, 29, 29, 0.10); } html[data-theme="dark"][data-accent="burgundy"] { --accent: #f87171; --accent-2: #f87171; --accent-strong: #fecaca; --accent-contrast: #450a0a; --accent-soft: rgba(248, 113, 113, 0.14); } /* Radius */ html[data-radius="sharp"] { --radius-sm: 2px; --radius: 4px; --radius-lg: 6px; } html[data-radius="soft"] { --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; } /* Density */ html[data-density="compact"] { --space-1: 3px; --space-2: 6px; --space-3: 10px; --space-4: 12px; --space-5: 18px; --space-6: 24px; --space-7: 36px; --space-8: 48px; } html[data-density="comfortable"] { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; } /* Defaults when attributes missing */ html:not([data-accent]) { /* ink default via cascade after light */ } html { --accent: #334155; --accent-2: #334155; --accent-strong: #1e293b; --accent-contrast: #ffffff; --accent-soft: rgba(51, 65, 85, 0.10); --radius-sm: 2px; --radius: 4px; --radius-lg: 6px; --cat-accent: var(--accent); }