/* ═══════════════════════════════════════════════════════
   theme.css — CSS Variables + Base Resets ONLY
   Jamia Ibne e Abbas — Design System
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --green-dark:   #0d3b27;
  --green-main:   #145c38;
  --green-mid:    #1e7a4a;
  --green-light:  #2da05e;
  --gold:         #c9a227;
  --gold-light:   #e3bb4a;
  --gold-dark:    #a87d10;
  --gold-accessible: #7a5f00;
  --green-deepest: #0a2e1e;
  --gold-deepest:  #7a5a10;

  /* ── Neutrals ── */
  --cream:        #fdf8ef;
  --cream-dark:   #f0e9d8;
  --white:        #ffffff;
  --text-main:    #1a1a1a;
  --text-muted:   #5a5a5a;
  --border-color: #e0d8cc;

  /* ── Elevation ── */
  --shadow:       0 8px 40px rgba(13,59,39,0.13);
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.06);
  --shadow-lg:    0 16px 64px rgba(13,59,39,0.12);

  /* ── Shape ── */
  --radius:       14px;
  --radius-sm:    8px;
  --radius-lg:    20px;
  --radius-pill:  9999px;

  /* ── Typography ── */
  --font-heading: 'Playfair Display', serif;
  --font-body:    'Nunito', sans-serif;
  --font-arabic:  'Amiri', serif;

  /* ── Transitions ── */
  --transition:      all 0.25s ease;
  --transition-fast: all 0.2s ease;

  /* ── Geometric SVG Patterns ── */
  --geo-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23ffffff10' stroke-width='1'%3E%3Cpolygon points='30,2 56,15 56,45 30,58 4,45 4,15'/%3E%3Cpolygon points='30,10 50,20 50,40 30,50 10,40 10,20'/%3E%3Cline x1='30' y1='2' x2='30' y2='58'/%3E%3Cline x1='4' y1='15' x2='56' y2='45'/%3E%3Cline x1='56' y1='15' x2='4' y2='45'/%3E%3C/g%3E%3C/svg%3E");
  --geo-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23ffffff08' stroke-width='1'%3E%3Cpolygon points='40,3 74,21 74,59 40,77 6,59 6,21'/%3E%3Cpolygon points='40,13 66,27 66,53 40,67 14,53 14,27'/%3E%3Cline x1='40' y1='3' x2='40' y2='77'/%3E%3Cline x1='6' y1='21' x2='74' y2='59'/%3E%3Cline x1='74' y1='21' x2='6' y2='59'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Font fallbacks with size-adjust to prevent CLS ── */
@font-face {
  font-family: 'Playfair Display Fallback';
  src: local('Georgia');
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Nunito Fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 100%;
  descent-override: 20%;
}

/* ── Base Resets ── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body), 'Nunito Fallback', sans-serif;
  background: var(--cream);
  color: var(--text-main);
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-heading), 'Playfair Display Fallback', serif; }
.arabic { font-family: var(--font-arabic); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}