/* ============================================
   EdSeva — Design tokens & base styles
   ============================================ */

:root {
  /* ====== Color tokens — edit these to re-theme the whole site ====== */

  /* Core palette (RGB triples so we can build rgba() overlays from variables) */
  --primary-rgb: 6, 45, 117;        /* Deep Sikh Blue   #234E70 */
  --hero-primary: 23, 23, 166;
  --primary-hover-rgb: 53, 108, 152; /* Royal Blue       #356C98 */
  --secondary-rgb: 217, 154, 43;     /* Soft Saffron     #D99A2B */
  --secondary-hover-rgb: 191, 133, 30; /* Deep Saffron   #BF851E */
  --accent-rgb: 166, 106, 63;        /* Warm Copper      #A66A3F */
  --accent-light-rgb: 215, 179, 141; /* Sand             #D7B38D */
  --bg-rgb: 255, 255, 255;           /* White            #FFFFFF */
  --bg-section-rgb: 248, 245, 239;   /* Cream            #F8F5EF */
  --bg-warm-rgb: 238, 232, 221;      /* Light Stone      #EEE8DD */
  --card-rgb: 252, 251, 248;         /* Ivory            #FCFBF8 */
  --border-rgb: 215, 210, 200;       /* Soft Grey        #D7D2C8 */
  --text-rgb: 44, 44, 44;            /* Charcoal         #2C2C2C */
  --text-muted-rgb: 107, 114, 128;   /* Slate            #6B7280 */
  --text-on-dark-rgb: 248, 245, 239; /* Cream, on dark surfaces */
  --shadow-rgb: 6, 45, 117;         /* Shadow tint, defaults to primary */

  /* Solid colors, derived from the RGB triples above */
  --color-primary: rgb(var(--primary-rgb));
  --color-hero-primary: rgb(var(--hero-primary));
  --color-primary-hover: rgb(var(--primary-hover-rgb));
  --color-secondary: rgb(var(--secondary-rgb));
  --color-secondary-hover: rgb(var(--secondary-hover-rgb));
  --color-accent: rgb(var(--accent-rgb));
  --color-accent-light: rgb(var(--accent-light-rgb));
  --color-bg: rgb(var(--bg-rgb));
  --color-bg-section: rgb(var(--bg-section-rgb));
  --color-bg-warm: rgb(var(--bg-warm-rgb));
  --color-card: rgb(var(--card-rgb));
  --color-border: rgb(var(--border-rgb));
  --color-text: rgb(var(--text-rgb));
  --color-text-muted: rgb(var(--text-muted-rgb));
  --color-text-on-dark: rgb(var(--text-on-dark-rgb));

  /* Translucent variants used for overlays, borders-on-dark, etc. */
  --color-on-dark-85: rgba(var(--text-on-dark-rgb), 0.85);
  --color-on-dark-82: rgba(var(--text-on-dark-rgb), 0.82);
  --color-on-dark-78: rgba(var(--text-on-dark-rgb), 0.78);
  --color-on-dark-75: rgba(var(--text-on-dark-rgb), 0.75);
  --color-on-dark-60: rgba(var(--text-on-dark-rgb), 0.6);
  --color-on-dark-35: rgba(var(--text-on-dark-rgb), 0.35);
  --color-on-dark-18: rgba(var(--text-on-dark-rgb), 0.18);
  --color-on-dark-14: rgba(var(--text-on-dark-rgb), 0.14);
  --color-on-dark-12: rgba(var(--text-on-dark-rgb), 0.12);
  --color-on-dark-10: rgba(var(--text-on-dark-rgb), 0.10);

  /* Type */
  --font-display: "Roboto Slab", Georgia, serif;
  --font-body: "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif;

  /* Scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;

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

  --max-width: 1180px;

  --shadow-whisper: 0 1px 3px rgba(var(--text-rgb), 0.06), 0 1px 2px rgba(var(--text-rgb), 0.04);
  --shadow-card: 0 2px 10px rgba(var(--shadow-rgb), 0.07);
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-primary);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
  font-weight: 700;
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

p {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover);
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

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

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.section {
  padding: var(--space-6) 0;
}

.section--cream {
  background: var(--color-bg-section);
}

.section--warm {
  background: var(--color-bg-warm);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

.section-head {
  max-width: 640px;
  margin: 0 0 var(--space-4);
}

.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.lede {
  font-size: 1.1rem;
  color: var(--color-text-muted);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn-primary:hover {
  background: var(--color-secondary-hover);
  color: var(--color-bg);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-bg);
  color: var(--color-bg);
}

.btn-outline:hover {
  background: var(--color-bg);
  color: var(--color-primary);
}

.btn-outline-dark {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline-dark:hover {
  background: var(--color-primary);
  color: var(--color-bg);
}

.btn-block {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Cards */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-whisper);
}

/* Visually hidden (skip link target labels etc) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: var(--color-bg);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}