/* ═══════════════════════════════════════════════════════════════
   Ummah Compass — Design Tokens v3
   Unified font system · Positional size scale
   ═══════════════════════════════════════════════════════════════

   FONT SYSTEM — two fonts, four roles:
   ┌─────────────────┬──────────────────────────────────────────┐
   │ --arabic        │ Amiri 400/700 — all Arabic script text,  │
   │                 │ duas, Quran, hadith                       │
   │ --display       │ Amiri 700     — hero titles, screen names │
   │                 │ Islamic calligraphic character for headers │
   │ --sans          │ Cormorant Garamond 400/500/700 — all      │
   │                 │ Latin UI: body, labels, hints, nav        │
   │ --mono          │ Cormorant Garamond 400 — toasts, pills,   │
   │                 │ timestamps, small utility text            │
   └─────────────────┴──────────────────────────────────────────┘

   SIZE SCALE — position-based, 8 levels:
   ┌──────────────┬────────────────┬──────────────────────────────┐
   │ display-1    │ 2.2rem max     │ App hero, screen masthead    │
   │ h1           │ 1.625rem max   │ Screen titles, card heroes   │
   │ h2           │ 1.3125rem max  │ Section headings, card heads │
   │ h3           │ 0.95rem max    │ Sub-section, group labels    │
   │ body         │ 1rem max       │ All paragraph / content text │
   │ label        │ 0.875rem max   │ Form labels, nav items, tabs │
   │ meta         │ 0.875rem max   │ Secondary info, timestamps   │
   │ micro        │ 0.75rem max    │ Badges, pills, fine print    │
   └──────────────┴────────────────┴──────────────────────────────┘
   ═══════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts ──────────────────────────────────────── */

/* Amiri — Arabic script + display headings
   Based on classical Naskh calligraphy (Al-Azhar / Bulaq Press).
   Used for ALL Arabic text AND all hero/display titles.         */
@font-face {
  font-family: 'Amiri';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/amiri-v30-arabic_latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/amiri-v30-arabic_latin-700.woff2') format('woff2');
}

/* Cormorant Garamond — Latin UI text
   Warm scholarly serif — pairs naturally with Amiri Naskh.
   Used for all Latin body copy, labels, hints and nav.          */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-700-italic.woff2') format('woff2');
}

/* Removed: Cinzel (Roman-origin, not Islamic), Lora (generic),
   Scheherazade New (redundant alongside Amiri).                 */


/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */
:root {

  /* ── Palette ──────────────────────────────────────────────── */
  --navy-deep:      #080e1c;
  --navy-mid:       #0c1628;
  --navy-card:      #111e36;
  --navy-elevated:  #162240;
  --white-soft:     #eaf0ff;
  --green-islamic:  #187560;
  --green-light:    #22a07f;
  --green-rgb:      24, 117, 96;
  --gold:           #c5964a;
  --gold-light:     #ddb870;
  --gold-rgb:       197, 150, 74;
  --blue-soft:      #7dd3fc;
  --blue-rgb:       125, 211, 252;
  --purple:         #a78bfa;
  --purple-rgb:     167, 139, 250;
  --rose:           #fb7185;
  --rose-rgb:       251, 113, 133;

  /* Parchment (Mushaf / Quran reader) */
  --parchment-light: #f8f2e2;
  --parchment-dark:  #efe4c8;
  --ink:             #1c2430;

  /* ── Semantic colour tokens ───────────────────────────────── */
  --bg:           var(--navy-deep);
  --card:         rgba(17, 30, 54, 0.72);
  --card-hover:   rgba(22, 34, 64, 0.82);
  --fg:           var(--white-soft);
  --muted:        rgba(234, 240, 255, 0.65);
  --border:       rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.13);
  --input-bg:     rgba(255, 255, 255, 0.05);
  --input-hover:  rgba(255, 255, 255, 0.08);
  --primary:      var(--green-islamic);
  --accent:       var(--gold);
  --danger:       var(--rose);

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-xs: 0 1px 3px  rgba(0,0,0,0.20);
  --shadow-sm: 0 3px 10px rgba(0,0,0,0.28);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.42);
  --shadow-xl: 0 28px 60px rgba(0,0,0,0.52);
  --glow-green:  0 0 24px rgba(var(--green-rgb),  0.18);
  --glow-gold:   0 0 24px rgba(var(--gold-rgb),   0.18);
  --glow-blue:   0 0 24px rgba(var(--blue-rgb),   0.18);
  --glow-purple: 0 0 24px rgba(var(--purple-rgb), 0.18);

  /* ── Layout ───────────────────────────────────────────────── */
  --radius:      16px;
  --radius-lg:   22px;
  --radius-sm:   12px;
  --radius-xs:   8px;
  --radius-pill: 999px;
  --max:         1140px;

  /* ── Font families ────────────────────────────────────────── */
  /* Arabic script — duas, Quran, hadith, Arabic UI in RTL mode */
  --arabic:  'Amiri', 'Noto Naskh Arabic', serif;

  /* Display / hero titles — Amiri Bold for Islamic character   */
  --display: 'Amiri', Georgia, serif;

  /* Latin body + UI — warm scholarly pairing for Amiri         */
  --sans:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Utility / small text — same family, lighter feel           */
  --mono:    'Cormorant Garamond', Georgia, serif;

  /* Convenience aliases matching old names — no code changes   */
  --sans-default:    var(--sans);
  --display-default: var(--display);
  --mono-default:    var(--mono);
  --arabic-default:  var(--arabic);

  /* ── Positional type scale ────────────────────────────────── */
  /*
     Every level is a fluid clamp(min, preferred, max).
     min  = smallest viewport (~320px)
     max  = desktop / large screen
     All values scale with --type-scale-factor (user preference).

     LEVEL          FONT            WEIGHT   WHERE USED
     display-1      Amiri           700      App hero, masthead bismillah
     h1             Amiri           700      Screen titles (Prayer, Quran…)
     h2             Amiri / sans    700      Card headings, section titles
     h3             sans            600/700  Sub-sections, group headers
     body           sans            400      Paragraphs, descriptions
     label          sans            500      Form labels, nav text, tabs
     meta           sans            400      Secondary info, dates, hints
     micro          sans            400      Badges, pills, footnotes
  */

  /* display-1 — app hero, masthead, bismillah hero */
  --fs-display-1-base: clamp(2rem,   1.4rem + 1.8vw, 2.75rem);
  --fs-display-1: calc(var(--fs-display-1-base) * var(--type-scale-factor));

  /* h1 — screen titles */
  --fs-h1-base:        clamp(1.5rem,  1.15rem + 0.9vw, 1.875rem);
  --fs-h1:        calc(var(--fs-h1-base) * var(--type-scale-factor));

  /* h2 — card headings, section titles */
  --fs-h2-base:        clamp(1.2rem,  1.0rem  + 0.55vw, 1.4375rem);
  --fs-h2:        calc(var(--fs-h2-base) * var(--type-scale-factor));

  /* h3 — sub-sections, group labels */
  --fs-h3-base:        clamp(1.0rem,  0.9rem  + 0.25vw, 1.125rem);
  --fs-h3:        calc(var(--fs-h3-base) * var(--type-scale-factor));

  /* body — all paragraph / content text */
  --fs-body-base:      clamp(0.9375rem, 0.9rem + 0.12vw, 1.0625rem);
  --fs-body:      calc(var(--fs-body-base) * var(--type-scale-factor));

  /* label — form labels, nav items, tab bar text */
  --fs-label-base:     clamp(0.8125rem, 0.79rem + 0.08vw, 0.9375rem);
  --fs-label:     calc(var(--fs-label-base) * var(--type-scale-factor));

  /* meta — secondary info, timestamps, hints */
  --fs-meta-base:      clamp(0.75rem,  0.73rem + 0.06vw, 0.875rem);
  --fs-meta:      calc(var(--fs-meta-base) * var(--type-scale-factor));

  /* micro — badges, pills, footnotes, fine print */
  --fs-micro-base:     clamp(0.625rem, 0.61rem + 0.04vw, 0.75rem);
  --fs-micro:     calc(var(--fs-micro-base) * var(--type-scale-factor));

  /* ── Arabic-specific size boosts ─────────────────────────── */
  /*
     Amiri renders slightly smaller than Latin fonts at the same
     px value. These multipliers compensate so Arabic text feels
     visually equal to its Latin counterpart at each level.
  */
  --fs-arabic-display: calc(var(--fs-display-1) * 1.15);
  --fs-arabic-h1:      calc(var(--fs-h1)        * 1.12);
  --fs-arabic-h2:      calc(var(--fs-h2)        * 1.1);
  --fs-arabic-body:    calc(var(--fs-body)       * 1.08);

  /* ── Line heights ─────────────────────────────────────────── */
  --lh-display: 1.2;   /* tight — display headlines */
  --lh-title:   1.3;   /* h1/h2 */
  --lh-copy:    1.65;  /* body paragraphs */
  --lh-ui:      1.4;   /* labels, nav, compact UI */
  --lh-arabic:  2.0;   /* Arabic always needs extra leading */

  /* ── Letter spacing ───────────────────────────────────────── */
  --tracking-display: 0.01em;  /* subtle — Amiri is already spaced */
  --tracking-title:   0.02em;
  --tracking-ui:      0.03em;
  --tracking-label:   0.04em;  /* labels benefit from slight open */
  --tracking-arabic:  0;       /* never track Arabic — breaks joins */

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    140ms;
  --dur-normal:  240ms;
  --dur-slow:    380ms;

  /* ── Safe area (iOS notch / Android gesture bar) ──────────── */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);

  /* ── Mushaf frame ─────────────────────────────────────────── */
  --frame-1: rgba(var(--green-rgb), 0.5);
  --frame-2: rgba(var(--gold-rgb),  0.42);
  --frame-3: rgba(0,0,0,0.10);
  --paper-1: var(--parchment-light);
  --paper-2: var(--parchment-dark);

  /* ── User preference foundation ──────────────────────────── */
  --type-scale-factor: 1;   /* 0.9 = compact · 1.1 = large text */
  --text-density:      1;
  --user-font-body:    var(--sans);
  --user-font-display: var(--display);
}


/* ── Positional utility classes ─────────────────────────────── */
/*
   Drop these classes on any element to get the right
   font + size + weight + line-height for its position.
   All classes respect --type-scale-factor automatically.
*/

.text-display {
  font-family: var(--display);
  font-size:   var(--fs-display-1);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

.text-h1 {
  font-family: var(--display);
  font-size:   var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
}

.text-h2 {
  font-family: var(--sans);
  font-size:   var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
}

.text-h3 {
  font-family: var(--sans);
  font-size:   var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-ui);
  letter-spacing: var(--tracking-ui);
}

.text-body {
  font-family: var(--sans);
  font-size:   var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-copy);
}

.text-label {
  font-family: var(--sans);
  font-size:   var(--fs-label);
  font-weight: 500;
  line-height: var(--lh-ui);
  letter-spacing: var(--tracking-label);
}

.text-meta {
  font-family: var(--sans);
  font-size:   var(--fs-meta);
  font-weight: 400;
  line-height: var(--lh-ui);
  color:       var(--muted);
}

.text-micro {
  font-family: var(--mono);
  font-size:   var(--fs-micro);
  font-weight: 400;
  line-height: var(--lh-ui);
  color:       var(--muted);
}

/* Arabic positional variants — same hierarchy, Amiri + boosts  */
.text-arabic-display {
  font-family: var(--arabic);
  font-size:   var(--fs-arabic-display);
  font-weight: 700;
  line-height: var(--lh-arabic);
  letter-spacing: var(--tracking-arabic);
  direction:   rtl;
}

.text-arabic-h1 {
  font-family: var(--arabic);
  font-size:   var(--fs-arabic-h1);
  font-weight: 700;
  line-height: var(--lh-arabic);
  letter-spacing: var(--tracking-arabic);
  direction:   rtl;
}

.text-arabic-h2 {
  font-family: var(--arabic);
  font-size:   var(--fs-arabic-h2);
  font-weight: 700;
  line-height: var(--lh-arabic);
  letter-spacing: var(--tracking-arabic);
  direction:   rtl;
}

.text-arabic-body {
  font-family: var(--arabic);
  font-size:   var(--fs-arabic-body);
  font-weight: 400;
  line-height: var(--lh-arabic);
  letter-spacing: var(--tracking-arabic);
  direction:   rtl;
}


/* ── Light mode override (Quran reader) ─────────────────────── */
.light {
  --bg:       #f5f0e8;
  --card:     rgba(255,255,255,0.9);
  --fg:       #1a1a2e;
  --muted:    #6b7280;
  --border:   rgba(0,0,0,0.1);
  --input-bg: rgba(0,0,0,0.04);
  --primary:  var(--green-islamic);
}