/*
 * main.css — Yogily shared styles
 * Loaded by: index.html (homepage only, uses fixed saffron tokens).
 * All other pages (teacher.html, programs/index.html, dashboard/*, etc.)
 * use inline CSS with theme tokens applied by _themes.js at runtime.
 * This file holds only site-wide resets and homepage-specific tokens.
 */

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

/* ── HOMEPAGE COLOUR TOKENS (fixed — saffron/cream, not themed) ── */
:root {
  --saffron:      #D4651C;
  --saffron-dk:   #B94F13;
  --saffron-pale: #F5E0CE;
  --cream:        #FAF6F0;
  --cream-mid:    #F0E8DC;
  --sand:         #E2D5C4;
  --warm-white:   #FFFCF8;
  --text-dark:    #241A10;
  --text-mid:     #6A5540;
  --text-light:   #7A6550;
  --dark:         #120A04;
  --green:        #3D7A50;
  --green-pale:   #E4F2EA;
  --red:          #B94132;
  --red-pale:     #FBEAE7;
}

/* ── BASE ── */
html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── UTILITY ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}