/* ============================================================
   BASE — Custom Properties, Reset, Typography
   Scholarship Gate
   ============================================================ */

:root {
  --color-navy:       #0B1F3A;
  --color-navy-dark:  #071528;
  --color-navy-light: #152E53;
  --color-gold:       #C49A3C;
  --color-gold-light: #D4AA50;
  --color-surface:    #F8F7F4;
  --color-white:      #FFFFFF;
  --color-text:       #111111;
  --color-muted:      #5A6272;
  --color-border:     #E2E5EA;

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-arabic:  'Cairo', 'Arial', sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --container-max:     1200px;
  --container-padding: 1.5rem;

  --transition:      0.2s ease;
  --transition-slow: 0.4s ease;

  --radius-sm: 4px;
  --radius:    8px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
  font-family: var(--font-arabic);
}

h1 { font-size: clamp(2rem,    5vw, 3.25rem); }
h2 { font-size: clamp(1.625rem, 3.5vw, 2.375rem); }
h3 { font-size: clamp(1.25rem,  2.5vw, 1.625rem); }
h4 { font-size: 1.125rem; }

p {
  color: var(--color-muted);
  max-width: 65ch;
}

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