/* ============================================================
   Sahifa Design System — Colors & Type
   ============================================================
   Faith-first Muslim accountability companion.
   Bilingual (RTL Arabic / LTR English). Warm paper + emerald
   + restrained gold. Calm, scholarly, intentional.
   ============================================================ */

/* ---------- Webfonts (substitutions — see README) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Reem+Kufi:wght@500;600;700&display=swap");

:root {
  /* =========================================================
     COLOR — Brand foundations
     The whole system is built on three core hues:
       emerald (the مسجد / mihrab voice — primary actions, ink)
       gold     (the muṣḥaf gilding — accents, focus, sadaqah)
       paper    (cream/parchment — the page itself, صحيفة)
     ========================================================= */

  /* --- Emerald scale (مسجد) --- */
  --emerald-950: #061f18;    /* deepest, only for header gradients */
  --emerald-900: #082f25;
  --emerald-800: #0d3d25;    /* primary ink — buttons, headings */
  --emerald-700: #145a3a;    /* hover state for emerald-800 */
  --emerald-600: #176336;
  --emerald-500: #1b5e3b;    /* secondary emerald — progress, accent */
  --emerald-400: #2e7d52;    /* success ticks, completed habits */
  --emerald-300: #72b58e;    /* progress fill, ring glow */
  --emerald-200: #a8d6b9;
  --emerald-100: #cfe2d2;
  --emerald-50:  #eef8f0;    /* completion card background */

  /* --- Gold scale (مصحف / حصاد) --- */
  --gold-900:    #6f4f16;    /* gold ink (verse copy) */
  --gold-800:    #7a5b18;
  --gold-700:    #8a6728;    /* secondary gold ink */
  --gold-600:    #b78322;    /* button gradient end */
  --gold-500:    #c5963a;    /* PRIMARY gold — chips, focus ring */
  --gold-400:    #d0a345;    /* button gradient start */
  --gold-300:    #d4ad5a;
  --gold-200:    #d9c488;
  --gold-100:    #e5d7ae;
  --gold-50:     #fff8e7;    /* gold callout background */

  /* --- Paper scale (صحيفة) --- */
  --paper-base:  #f3f1ea;    /* app background (mihrab cream) */
  --paper-soft:  #f8f4ec;
  --paper-warm:  #fbf8f1;    /* card-foot bands */
  --paper-card:  #fffdf8;    /* primary card surface */
  --paper-pure:  #ffffff;
  --paper-cream: #f5f0e8;    /* alt background */
  --paper-tint:  #fbf4ed;    /* earth callout */

  /* --- Ink scale (text colors) --- */
  --ink-900:     #18241f;    /* body text */
  --ink-800:     #20382c;
  --ink-700:     #2c2c2c;    /* habit row text */
  --ink-600:     #2f3b34;
  --ink-500:     #516057;    /* muted ink, icon buttons */
  --ink-400:     #68736b;    /* nav inactive */
  --ink-300:     #8b8175;
  --ink-200:     #999999;
  --ink-100:     #c7b99f;    /* sheet handle */

  /* --- Border scale (warm parchment borders) --- */
  --line-strong: #d9cfbf;    /* form controls */
  --line:        #e0d9ce;    /* default card border */
  --line-soft:   #ede8df;    /* dividers inside cards */
  --line-cream:  #f1d3d0;    /* missed/danger border */

  /* --- Semantic — Status / pillars --- */
  --danger:           #b3261e;    /* تأخر, missed */
  --danger-ink:       #8c2a22;
  --danger-soft:      #fff5f2;
  --warn:             #c5963a;
  --warn-soft:        #fff8e8;
  --info:             #245f8f;    /* blue tone — knowledge */
  --info-soft:        #edf5fb;
  --cool:             #537180;    /* excused (معذورة) */
  --cool-soft:        #eaf2f5;
  --earth:            #6f4e37;    /* hadith/quote tone */

  /* --- The Four Pillars (نيات / categories) --- */
  --pillar-rizq:      #C5963A;    /* رزق — Provision (gold) */
  --pillar-ilm:       #2196F3;    /* علم — Knowledge (blue) */
  --pillar-ahl:       #9C27B0;    /* أهل — Family (purple) */
  --pillar-nafs:      #009688;    /* نفس — Self (teal) */

  /* =========================================================
     TYPOGRAPHY — Bilingual stack
     Arabic and Latin are co-equal citizens. Every Arabic
     glyph is set in Tajawal (UI) or Amiri (Quranic / verse).
     Latin uses Geist for product chrome and Inter for prose.
     ========================================================= */

  /* --- Families --- */
  --font-ui-ar:      "Tajawal", "Reem Kufi", "Segoe UI Arabic", "Geeza Pro", system-ui, sans-serif;
  --font-ui-en:      "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-ui:         var(--font-ui-en), var(--font-ui-ar);
  --font-display-ar: "Reem Kufi", "Tajawal", "Segoe UI Arabic", system-ui, sans-serif;
  --font-verse-ar:   "Amiri", "Scheherazade New", "Amiri Quran", "Times New Roman", serif;
  --font-mono:       "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Type scale (mobile-first; sizes are practical, not heroic) --- */
  --fs-overline: 10px;        /* date strip, kind label */
  --fs-caption:  11px;        /* nav labels, hijri sub */
  --fs-micro:    12px;        /* chips, footnotes */
  --fs-small:    13px;        /* card meta, secondary */
  --fs-body:     14px;        /* habit row, default UI */
  --fs-base:     15px;        /* default body */
  --fs-medium:   16px;        /* section title */
  --fs-large:    18px;        /* H3, modal title */
  --fs-xl:       20px;        /* page title */
  --fs-display:  28px;        /* large numerals (counter) */
  --fs-hero:     34px;

  /* --- Weights --- */
  --fw-regular:  400;   /* @kind font */
  --fw-medium:   500;   /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold:     700;   /* @kind font */
  --fw-black:    800;   /* @kind font */

  /* --- Line heights (slightly generous for Arabic) --- */
  --lh-tight:    1.25;  /* @kind font */
  --lh-snug:     1.5;   /* @kind font */
  --lh-base:     1.6;   /* @kind font */
  --lh-relaxed:  1.7;   /* @kind font */
  --lh-arabic:   1.8;   /* @kind font */

  /* --- Letter spacing --- */
  --ls-overline: 0.04em;   /* @kind font */
  --ls-tight:    -0.01em;  /* @kind font */

  /* =========================================================
     SHAPE — Radii, shadows, spacing
     ========================================================= */

  /* --- Radii (warm, never sharp) --- */
  --r-xs:    6px;    /* chip */
  --r-sm:    8px;    /* chip alt */
  --r-md:   10px;    /* control, segment */
  --r-lg:   12px;    /* card */
  --r-xl:   14px;    /* verse card */
  --r-2xl:  22px;    /* bottom sheet top */
  --r-pill: 9999px;

  /* --- Spacing (4-pt scale) --- */
  --sp-0:  0;       /* @kind spacing */
  --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;

  /* --- Shadows (warm ink-tinted, never neutral gray) --- */
  --shadow-xs:    0 1px 0 rgba(255, 255, 255, 0.68);                          /* control sheen */
  --shadow-sm:    0 6px 18px rgba(30, 42, 36, 0.06);                          /* soft card */
  --shadow-card:  0 8px 24px rgba(30, 42, 36, 0.075);                         /* default card */
  --shadow-lift:  0 8px 28px rgba(8, 47, 37, 0.16);                           /* verse / lifted */
  --shadow-gold:  0 12px 28px rgba(139, 103, 40, 0.38);                       /* FAB */
  --shadow-sheet: 0 -18px 45px rgba(8, 47, 37, 0.28);                         /* bottom sheet */
  --shadow-dock:  0 -10px 30px rgba(8, 47, 37, 0.16);                         /* dock */
  --inner-sheen:  inset 0 1px 0 rgba(255, 255, 255, 0.65);                    /* @kind shadow */
  --focus-ring:   0 0 0 3px rgba(197, 150, 58, 0.16);                         /* focus halo */

  /* --- Motion --- */
  --t-fast:   120ms cubic-bezier(0.2, 0.8, 0.2, 1);   /* @kind other */
  --t-base:   160ms ease;                              /* @kind other */
  --t-slow:   240ms ease;                              /* @kind other */
  --t-bounce: 520ms cubic-bezier(0.2, 0.8, 0.2, 1);   /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE — preset classes
   Apply directly to elements; respect RTL.
   ============================================================ */

html[lang="ar"], [dir="rtl"] {
  font-family: var(--font-ui-ar);
}
html[lang="en"], [dir="ltr"] {
  font-family: var(--font-ui-en);
}

.t-h1 {
  font-family: var(--font-display-ar), var(--font-ui-en);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--emerald-800);
  letter-spacing: var(--ls-tight);
}
.t-h2 {
  font-size: var(--fs-large);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--emerald-800);
}
.t-h3 {
  font-size: var(--fs-medium);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}
.t-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--ink-900);
}
.t-body-ar {
  font-family: var(--font-ui-ar);
  line-height: var(--lh-arabic);
  font-size: var(--fs-body);
  color: var(--ink-700);
}
.t-verse {
  font-family: var(--font-verse-ar);
  font-size: var(--fs-medium);
  line-height: var(--lh-arabic);
  color: var(--gold-900);
}
.t-meta {
  font-size: var(--fs-micro);
  color: var(--ink-500);
}
.t-overline {
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--gold-700);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-feature-settings: "tnum" 1;
}
.t-counter {
  font-family: var(--font-mono);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  color: var(--emerald-800);
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--ls-tight);
}