/*
 * Aayaatul Quran — design tokens.
 * Brand colours are taken from the original site and logo; everything else is an accent around them.
 * Two themes: "paper" (light, default) and "night" (dark, for night reading) — set with <html data-theme>.
 */
:root {
  /* ── Brand (original site + logo) ─────────────────────────────── */
  --brand-gold: #CC9933;        /* --gold-primary on the original site, wordmark gold */
  --brand-gold-dark: #A67B24;   /* --gold-dark */
  --brand-gold-deep: #745B0E;   /* --gold-deep */
  --brand-gold-border: #E5C568; /* --gold-border */
  --brand-gold-light: #FDFBF5;  /* --gold-light */
  --brand-paper: #FAF9F6;       /* --bg-primary */
  --brand-logo: #C38919;        /* ayah ornament in the original icon */
  --brand-ink: #1F2937;         /* --text-dark */
  --brand-muted: #6B7280;       /* --text-muted */

  /* ── Supporting accents ───────────────────────────────────────── */
  --leaf-1: #FFF4CC;            /* gold-leaf highlight */
  --leaf-2: #F3D98B;
  --leaf-3: #DDB453;
  --ink-1: #1A1712;             /* deep ink */
  --ink-2: #2A261E;
  --night-1: #0D0F13;           /* soft night */
  --night-2: #14171D;
  --night-3: #1B1F27;
  --paper-1: #FFFFFF;
  --paper-2: #F4EFE3;           /* warm paper, sunken */
  --ok: #3C7A5B;
  --ok-soft: #E6F1EA;
  --bad: #B2452F;
  --bad-soft: #F8E7E2;
  --warn: #A9701A;
  --warn-soft: #FAF0D9;

  /* ── Type ─────────────────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', 'Segoe UI Variable', system-ui, sans-serif;
  --font-accent: 'Bricolage Grotesque', 'Hanken Grotesk', 'Segoe UI Variable', system-ui, sans-serif;   /* gold accent words: the title face, condensed */
  --accent-stretch: 75%;
  --font-ui: 'Hanken Grotesk', 'Segoe UI Variable', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;   /* pass fields, codes, numbers */
  --font-arabic: 'Amiri Quran', 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', 'Traditional Arabic', serif;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: clamp(1.3rem, 1.1rem + 0.8vw, 1.5rem);
  --fs-32: clamp(1.6rem, 1.2rem + 1.7vw, 2.1rem);
  --fs-44: clamp(2rem, 1.3rem + 3vw, 2.9rem);
  --fs-60: clamp(2.45rem, 1.3rem + 5vw, 4.1rem);
  --fs-84: clamp(2.7rem, 1rem + 7.4vw, 5.6rem);

  /* ── Space, radius, elevation ─────────────────────────────────── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --section: clamp(72px, 6vw + 40px, 136px);
  --gutter: clamp(20px, 5vw, 48px);
  --wrap: 1180px;
  --wrap-narrow: 760px;

  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-5: 28px; --r-pill: 999px;

  /* ── Motion ───────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-1: 140ms; --t-2: 240ms; --t-3: 420ms; --t-4: 700ms; --t-5: 1100ms;

  --header-h: 72px;
  --z-header: 50; --z-dock: 60; --z-modal: 100; --z-toast: 120; --z-intro: 200;

  color-scheme: light;
}

/* ── Paper (light) ──────────────────────────────────────────────── */
:root, [data-theme='light'] {
  --bg: var(--brand-paper);
  --bg-tint: var(--brand-gold-light);
  --surface: var(--paper-1);
  --surface-2: var(--brand-gold-light);
  --sunken: var(--paper-2);
  --text: var(--ink-1);
  --text-2: #5A5447;
  --text-3: #857E70;
  --line: #ECE5D3;
  --line-2: #DDD1B1;
  --accent: var(--brand-gold);
  --accent-2: var(--brand-gold-dark);
  --accent-text: var(--brand-gold-deep);       /* gold that passes contrast for text on paper */
  --accent-soft: #F7EFD9;
  --accent-line: var(--brand-gold-border);
  --on-accent: #1D1503;
  --inverse: var(--ink-1);
  --on-inverse: #F7F1E3;
  --ok-text: #2C6247; --bad-text: #9A3421; --warn-text: #84560E;
  --ok-bg: var(--ok-soft); --bad-bg: var(--bad-soft); --warn-bg: var(--warn-soft);
  --leaf: linear-gradient(135deg, #B8861F 0%, #E8C766 28%, #FFF1BF 46%, #D9AE4F 60%, #A67B24 100%);
  --leaf-flat: linear-gradient(180deg, #DDB453, #C6952F);
  --pattern-ink: rgba(166, 123, 36, 0.13);
  --shadow-1: 0 1px 2px rgba(60, 44, 10, 0.06), 0 2px 8px rgba(60, 44, 10, 0.04);
  --shadow-2: 0 2px 4px rgba(60, 44, 10, 0.05), 0 12px 28px -8px rgba(60, 44, 10, 0.14);
  --shadow-3: 0 4px 10px rgba(60, 44, 10, 0.06), 0 30px 60px -18px rgba(60, 44, 10, 0.26);
  --glow: 0 0 0 1px rgba(204, 153, 51, 0.35), 0 10px 40px -10px rgba(204, 153, 51, 0.55);
  --scrim: rgba(26, 23, 18, 0.5);
  --page-leaf: #FFFFFF;
  /* Learner pass (ivory ticket stock on paper, smoked stock at night). */
  --pass-bg: #FFFDF6; --pass-strong: #1C1810; --pass-muted: #8A8270; --pass-line: #DCD2BB; --pass-ink: #1C1810; --pass-off: rgba(28, 24, 16, 0.12); --pass-shadow: rgba(60, 44, 10, 0.2);
}

/* ── Night (dark) ───────────────────────────────────────────────── */
[data-theme='dark'] {
  color-scheme: dark;
  --bg: var(--night-1);
  --bg-tint: #11141A;
  --surface: var(--night-2);
  --surface-2: var(--night-3);
  --sunken: #090A0D;
  --text: #F2ECDD;
  --text-2: #B9B19F;
  --text-3: #837C6D;
  --line: #262A33;
  --line-2: #383D49;
  --accent: var(--brand-gold);
  --accent-2: var(--brand-gold-border);
  --accent-text: #E5C568;
  --accent-soft: #231D0E;
  --accent-line: #6B5420;
  --on-accent: #1D1503;
  --inverse: #F2ECDD;
  --on-inverse: #16130D;
  --ok-text: #86C9A4; --bad-text: #F0A08D; --warn-text: #E8BF6A;
  --ok-bg: #12241B; --bad-bg: #2C1611; --warn-bg: #2A2010;
  --pattern-ink: rgba(229, 197, 104, 0.09);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 30px -10px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 4px 10px rgba(0, 0, 0, 0.3), 0 34px 70px -20px rgba(0, 0, 0, 0.75);
  --glow: 0 0 0 1px rgba(229, 197, 104, 0.35), 0 10px 46px -10px rgba(204, 153, 51, 0.5);
  --scrim: rgba(4, 5, 7, 0.68);
  --page-leaf: #FBF8F1;
  --pass-bg: #1E1B15; --pass-strong: #F2ECDD; --pass-muted: #958C78; --pass-line: #3E392D; --pass-ink: #F2ECDD; --pass-off: rgba(242, 236, 221, 0.13); --pass-shadow: rgba(0, 0, 0, 0.55);
}

@media (max-width: 720px) {
  :root { --header-h: 62px; }
}