/* ============================================================
   QR114 Salaam Stream — Design Foundations
   Colors + Typography tokens for the (light, airy) brand system.
   The marketing site is LIGHT primary; dark surfaces are reserved
   for premium "feature" / product-showcase moments.
   ============================================================ */

/* ---- Fonts (Google Fonts CDN — see README "Typography" note) ---- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Cairo:wght@400;500;600;700&display=swap');

:root {
  /* ============ BRAND CORE ============ */
  --qr-emerald:        #199840;  /* PRIMARY — logo, CTAs, links */
  --qr-forest:         #0E5C2F;  /* heading emphasis, deep green */
  --qr-forest-deep:    #0A3D20;
  --qr-gold:           #FDBC39;  /* ACCENT — eyebrows, highlights */
  --qr-gold-deep:      #B5821B;  /* gold text on light surfaces */

  /* ============ GREEN SCALE ============ */
  --green-50:  #ECFAF0;
  --green-100: #D2F2DC;
  --green-200: #A7E5B9;
  --green-300: #6FD08C;
  --green-400: #38B461;
  --green-500: #199840;   /* = emerald */
  --green-600: #137B34;
  --green-700: #0E5C2F;   /* = forest */
  --green-800: #0A3D20;
  --green-900: #06291A;

  /* ============ GOLD / AMBER SCALE ============ */
  --gold-50:  #FEF8E8;
  --gold-100: #FDEFC6;
  --gold-200: #FBDF8E;
  --gold-300: #FBD063;
  --gold-400: #FDBC39;   /* = gold */
  --gold-500: #E9A521;
  --gold-600: #B5821B;   /* = gold-deep, AA on light */
  --gold-700: #876012;

  /* ============ WARM NEUTRALS ============ */
  --white:     #FFFFFF;
  --paper:     #FCFBF7;   /* card surface on canvas */
  --canvas:    #F7F4EE;   /* page background (airy cream) */
  --sand-100:  #EFEBE1;
  --sand-200:  #E2DDCF;   /* default border */
  --sand-300:  #CFC9B8;
  --sand-400:  #A8A493;
  --ink-500:   #7C7A6C;   /* muted text */
  --ink-600:   #585A50;   /* secondary text */
  --ink-700:   #3C3E37;   /* body text */
  --ink-900:   #14201A;   /* headings (green-black) */

  /* ============ DARK SURFACES (feature / footer) ============ */
  --dark-bg:    #0E0E0F;   /* near-black canvas */
  --dark-900:   #121213;
  --dark-800:   #1A1B1C;   /* dark card */
  --dark-700:   #232425;   /* dark card raised / border */
  --on-dark:    #FFFFFF;
  --on-dark-60: #B9BEB9;   /* secondary text on dark */
  --on-dark-40: #7C827C;

  /* ============ SEMANTIC ============ */
  --bg:            var(--canvas);
  --surface:       var(--white);
  --surface-2:     var(--paper);
  --text:          var(--ink-700);
  --text-strong:   var(--ink-900);
  --text-muted:    var(--ink-500);
  --border:        var(--sand-200);
  --border-strong: var(--sand-300);
  --primary:       var(--qr-emerald);
  --primary-hover: var(--green-600);
  --primary-press: var(--green-700);
  --accent:        var(--qr-gold);
  --accent-text:   var(--gold-600);
  --link:          var(--qr-emerald);
  --focus-ring:    color-mix(in oklab, var(--qr-emerald) 45%, transparent);

  --success: var(--green-500);
  --warning: var(--gold-500);
  --danger:  #C2410C;

  /* ============ TYPOGRAPHY ============ */
  --font-display: 'Outfit', system-ui, sans-serif;          /* geometric, calm — headings */
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;/* clean body */
  --font-arabic:  'Cairo', 'Outfit', system-ui, sans-serif;  /* Arabic + Quranic titles */
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Fluid type scale */
  --fs-display-1: clamp(2.75rem, 5.2vw, 4.25rem);  /* 44 → 68 */
  --fs-display-2: clamp(2.25rem, 4vw, 3.25rem);    /* 36 → 52 */
  --fs-h1:   clamp(2rem, 3.2vw, 2.75rem);          /* 32 → 44 */
  --fs-h2:   clamp(1.625rem, 2.4vw, 2.125rem);     /* 26 → 34 */
  --fs-h3:   1.5rem;     /* 24 */
  --fs-h4:   1.25rem;    /* 20 */
  --fs-lead: 1.25rem;    /* 20 lead paragraph */
  --fs-body: 1.0625rem;  /* 17 */
  --fs-sm:   0.9375rem;  /* 15 */
  --fs-xs:   0.8125rem;  /* 13 */
  --fs-eyebrow: 0.8125rem;/* 13 uppercase */

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  --tracking-eyebrow: 0.22em;
  --tracking-tight: -0.02em;

  /* ============ SPACING (4px base) ============ */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ============ RADII ============ */
  --r-sm: 8px;   --r-md: 12px;  --r-lg: 16px;
  --r-xl: 22px;  --r-2xl: 28px; --r-3xl: 36px;
  --r-pill: 999px;

  /* ============ SHADOWS (soft, warm) ============ */
  --sh-xs: 0 1px 2px rgba(20,32,26,.05);
  --sh-sm: 0 2px 8px rgba(20,32,26,.06);
  --sh-md: 0 10px 28px rgba(20,32,26,.08);
  --sh-lg: 0 22px 52px rgba(20,32,26,.11);
  --sh-emerald: 0 14px 34px rgba(25,152,64,.22);   /* primary button lift */
  --sh-dark: 0 24px 60px rgba(0,0,0,.45);

  /* signature: glowing emerald accent edge used on dark cards */
  --accent-edge: linear-gradient(90deg, var(--green-700), var(--green-400), var(--green-700));

  /* transitions */
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur: 220ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS — opt in via .qr-prose or base reset
   ============================================================ */
.qr-type-base, body.qr {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.qr-display-1, .qr-display-2,
h1.qr, h2.qr, h3.qr, h4.qr {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  font-weight: 700;
  text-wrap: balance;
}
.qr-display-1 { font-size: var(--fs-display-1); }
.qr-display-2 { font-size: var(--fs-display-2); }
h1.qr { font-size: var(--fs-h1); }
h2.qr { font-size: var(--fs-h2); }
h3.qr { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 600; }
h4.qr { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; }

/* Eyebrow / kicker — gold, uppercase, tracked (brand signature) */
.qr-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent-text);
}
.qr-eyebrow.on-dark { color: var(--qr-gold); }

/* Gold underline rule under section headings (brand signature) */
.qr-rule {
  width: 64px; height: 4px; border-radius: 999px;
  background: var(--qr-gold);
  display: block;
}

.qr-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-600); }
.qr-muted { color: var(--text-muted); }

/* Two-tone heading: ink word + emerald word (used across collateral) */
.qr-em { color: var(--qr-emerald); }
.qr-em-forest { color: var(--qr-forest); }

/* Arabic / Quranic text */
.qr-arabic { font-family: var(--font-arabic); }
[dir="rtl"] { font-family: var(--font-arabic); }

a.qr, .qr-link { color: var(--link); text-decoration: none; }
a.qr:hover, .qr-link:hover { text-decoration: underline; text-underline-offset: 3px; }

code, kbd, .qr-mono { font-family: var(--font-mono); }