/* ============================================================
   КЧИИ — Karachay-Cherkess Islamic Institute Design System
   Colors & Typography foundation
   ============================================================ */

/* ---------- COLOR TOKENS ---------- */
:root {
  /* ---- Base canvas ---- */
  --bg:           #ffffff;       /* default page background */
  --bg-cream:     #f8f6f1;       /* warm cream — section-alt, sveden sidebar, compliance bar */
  --bg-paper:     #fbfaf6;       /* very subtle off-white card backgrounds */
  --ink:          #1a2421;       /* default body text on light */
  --ink-muted:    #555555;       /* secondary text */
  --ink-soft:     #777777;       /* tertiary / news excerpts */
  --ink-faint:    #999999;       /* labels / empty-state */
  --border:       rgba(0, 0, 0, 0.08);   /* default hairline border */
  --border-soft:  rgba(0, 0, 0, 0.05);
  --border-strong:rgba(0, 0, 0, 0.14);

  /* ---- Brand greens (traditional Islamic / institutional) ---- */
  --green-50:     #eef5ef;       /* req-box bg, subtle highlights */
  --green-100:    #d6e6d8;       /* section title border-bottom */
  --green-200:    #a9c8ad;       /* sidebar scrollbar / outline */
  --green-300:    #7daa84;
  --green-400:    #4f8b5a;
  --green-500:    #2f7a3e;       /* icon accents */
  --green-600:    #1e6532;       /* link green, primary CTA fallback */
  --green-700:    #155027;       /* hover */
  --green-800:    #0e3a1c;       /* headings, primary brand */
  --green-900:    #082414;       /* deepest — hero backdrop overlay */

  /* ---- Gold accent (highlight in hero, primary CTA) ---- */
  --gold-50:      #fbf3df;
  --gold-100:     #f4e1a6;
  --gold-300:     #d9b85f;
  --gold-500:     #b8902f;       /* btn-gold base */
  --gold-600:     #a07d22;       /* btn-gold hover */
  --gold-700:     #7a5d15;       /* gold text on light */
  --gold-ink:     #2a1e07;       /* deep gold-brown text on gold */

  /* ---- Semantic ---- */
  --info:         #2563a8;
  --success:      var(--green-600);
  --warning:      #c08a2a;
  --danger:       #a3402c;

  /* ---- Foreground roles ---- */
  --fg-1:         var(--ink);
  --fg-2:         var(--ink-muted);
  --fg-3:         var(--ink-soft);
  --fg-4:         var(--ink-faint);
  --fg-brand:     var(--green-800);
  --fg-link:      var(--green-600);
  --fg-on-dark:   #f3efe4;
  --fg-on-gold:   var(--gold-ink);

  /* ---- Surface roles ---- */
  --surface-1:    #ffffff;
  --surface-2:    var(--bg-cream);
  --surface-3:    var(--green-50);
  --surface-inverse: var(--green-800);

  /* ---- Hero overlay (deep green photographic backdrop) ---- */
  --hero-overlay-from: rgba(8, 36, 20, 0.78);
  --hero-overlay-to:   rgba(14, 58, 28, 0.55);

  /* ---- Shadows ---- */
  --shadow-xs:    0 1px 2px rgba(14, 58, 28, 0.06);
  --shadow-sm:    0 2px 6px rgba(14, 58, 28, 0.08);
  --shadow-md:    0 6px 18px rgba(14, 58, 28, 0.10);
  --shadow-lg:    0 14px 38px rgba(14, 58, 28, 0.14);
  --shadow-hero:  0 24px 60px rgba(8, 36, 20, 0.35);

  /* ---- Radii ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* ---- Spacing scale (8pt grid with half-step) ---- */
  --s-0:  0;
  --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;

  /* ---- Type families ---- */
  --font-serif:   Georgia, "Times New Roman", "PT Serif", "Noto Serif", serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", "PT Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-arabic:  "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", serif;

  /* ---- Type tokens (mobile-first; scale up via media if needed) ---- */
  --fs-display:   clamp(36px, 5vw, 64px);
  --fs-h1:        clamp(28px, 3.4vw, 44px);
  --fs-h2:        24px;
  --fs-h3:        18px;
  --fs-h4:        16px;
  --fs-body:      14px;
  --fs-body-sm:   13px;
  --fs-small:     12px;
  --fs-tiny:      10.5px;
  --fs-label:     10.5px;

  --lh-tight:     1.15;
  --lh-snug:      1.35;
  --lh-normal:    1.6;
  --lh-relaxed:   1.7;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-label:   0.07em;   /* uppercase info-labels */

  /* ---- Z layers ---- */
  --z-base:   1;
  --z-sticky: 10;
  --z-header: 50;
  --z-overlay:100;
  --z-modal:  200;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
}

/* ============================================================
   SEMANTIC TYPE HELPERS
   Use these classes (or copy the rules) instead of bespoke sizes.
   ============================================================ */

.display, h1.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  color: var(--fg-brand);
  letter-spacing: var(--tracking-tight);
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--fg-brand);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-brand);
  margin: 0;
}

h3, .h3, .section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-brand);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-brand);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.lead {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.small, small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.label, .info-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-4);
  font-weight: 500;
}

.value, .info-value {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-brand);
  line-height: var(--lh-normal);
}

.eyebrow, .page-hero-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--green-700);
  background: var(--green-50);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 0.5px solid var(--green-200);
}

.gold {
  color: var(--gold-500);
  font-family: var(--font-serif);
  font-style: italic;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-cream);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  color: var(--green-800);
}

.arabic {
  font-family: var(--font-arabic);
  direction: rtl;
  font-size: 1.4em;
  line-height: 1.4;
  color: var(--fg-brand);
}

/* Base resets that work in concert with this token set */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--green-700); }