/* ============================================================
   ATHER PRIVATE SCHOOLS — BASE
   Design tokens, reset, typography
   ============================================================ */

:root {
  /* ---------- Brand core ---------- */
  --brand-navy:        #14213D;
  --brand-navy-deep:   #0B1730;
  --brand-navy-soft:   #243A66;
  --brand-ink:         #0A0F1F;
  --brand-gold:        #c9ab65;
  --brand-gold-soft:   #E5CE96;

  /* ---------- Neutrals ---------- */
  --ivory:             #FAF7F2;
  --paper:             #FFFFFF;
  --mist:              #F2F4F8;
  --line:              #E3E6EE;
  --line-strong:       #C9CFDD;
  --muted:             #5B6478;
  --muted-strong:      #2E3648;

  /* ---------- Semantic ---------- */
  --bg:                var(--ivory);
  --surface:           var(--paper);
  --text:              var(--brand-ink);
  --text-soft:         var(--muted);
  --link:              var(--brand-navy);

  /* ---------- Per-school accents (set on body[data-school]) ---------- */
  --accent:            var(--brand-gold);
  --accent-soft:       var(--brand-gold-soft);
  --accent-ink:        #3A2E10;

  /* Active nav / lang pill (master = gold; school pages override via --accent) */
  --nav-active-bg:     var(--brand-gold);
  --nav-active-fg:     #0B1730;
  --nav-active-muted:  rgba(11, 23, 48, .75);
  --nav-active-shadow: rgba(201, 171, 101, .45);

  /* ---------- Type ---------- */
  --font-serif:  'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-ar:     'Tajawal', 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;

  /* ---------- Scale ---------- */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  4rem;
  --fs-hero: clamp(2.5rem, 6vw, 5.25rem);

  /* ---------- Spacing ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---------- Radius / shadow ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-full: 999px;

  --sh-sm: 0 1px 2px rgba(11,23,48,.06), 0 1px 1px rgba(11,23,48,.04);
  --sh-md: 0 4px 14px rgba(11,23,48,.08), 0 2px 4px rgba(11,23,48,.04);
  --sh-lg: 0 18px 48px rgba(11,23,48,.14), 0 6px 16px rgba(11,23,48,.06);
  --sh-xl: 0 32px 80px rgba(11,23,48,.18);

  /* ---------- Layout ---------- */
  --container: 1240px;
  --container-wide: 1440px;
  --header-h: 84px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 600ms;
}

body[data-school="master"] {
  --nav-active-bg:     #c9ab65;
  --nav-active-fg:     #0B1730;
  --nav-active-muted:  rgba(11, 23, 48, .75);
  --nav-active-shadow: rgba(201, 171, 101, .45);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--link); text-decoration: none; }
ul, ol { padding: 0; list-style: none; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html[lang="ar"] body { font-family: var(--font-ar); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--brand-navy-deep);
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 { font-family: var(--font-ar); font-weight: 700; letter-spacing: 0; }

h1 { font-size: var(--fs-hero); }
h2 { font-size: clamp(1.75rem, 3.4vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p  { color: #000000; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent);
}

.lede { font-size: var(--fs-md); color: var(--muted-strong); max-width: 60ch; }

/* ---------- Utilities ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.container-wide { max-width: var(--container-wide); }
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-tight { padding-block: clamp(3rem, 6vw, 5rem); }
.grid { display: grid; gap: var(--sp-6); }
.flex { display: flex; }
.center { display: grid; place-items: center; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Selection — standard browser-like bluish highlight */
::selection      { background: #B5D6FE; color: #0B1730; }
::-moz-selection { background: #B5D6FE; color: #0B1730; }

/* Focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scrollbar (subtle) */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--brand-navy-soft); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}