/* ============================================================ Quran Mini — default.css Reset, design tokens, and base typography. Extracted from reference mockups (Pencil exports). ============================================================ */ *, *::before, *::after { box-sizing: border-box; } :root { color-scheme: light; /* Colors (light) */ --color-bg: #F7F5F1; --color-ink: #1C1B18; --color-body: #3D3A33; --color-muted: #96907F; --color-faint: #C9C5BC; --color-border: #EFEDE8; --color-surface: #EFEDE8; --color-accent: oklch(0.53 0.095 162); --color-accent-soft: color-mix(in oklch, var(--color-accent) 8%, transparent); /* Typography */ --font-ui: 'Inter', system-ui, sans-serif; --font-serif: 'Lora', system-ui, sans-serif; --font-display: 'Atkinson Hyperlegible Next', system-ui, sans-serif; /* Radii */ --radius-sm: 10px; --radius-md: 12px; --radius-lg: 15px; --radius-xl: 16px; --radius-pill: 17px; /* Layout */ --font-scale: 1; } /* Dark theme: the warm neutral palette keeps its hue while the accent stays constant across themes. Applied by the bootstrap script (and app.js) via data-theme on . */ html[data-theme="dark"] { color-scheme: dark; --color-bg: #232323; --color-ink: #EDE9E1; --color-body: #D8D2C6; --color-muted: #A69E90; --color-faint: #6A6459; --color-border: #2A2722; --color-surface: #211E1A; } /* Sepia theme: a fixed warm-beige reading palette. Lighter than dark, but surfaces and borders shift a step darker than the page background. */ html[data-theme="sepia"] { color-scheme: light; --color-bg: #E0DCD1; --color-ink: #1C1B18; --color-body: #3D3A33; --color-muted: #8E897B; --color-faint: #BDB8AC; --color-border: #D4CFC3; --color-surface: #D8D3C8; } html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; scrollbar-width: thin; } body { margin: 0; font-family: var(--font-ui); color: var(--color-ink); background: var(--color-bg); line-height: normal; scrollbar-gutter: stable; -webkit-font-smoothing: antialiased; /* Smooth theme switches without animating layout. */ transition: background-color 0.2s ease, color 0.2s ease; } p, h1, h2, h3, ol, ul { margin: 0; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } ol, ul { padding: 0; list-style: none; } img, svg { display: block; } [hidden] { display: none !important; }