/* ============================================================
   VATIKA — RKM Memorial Academy Design System
   "वाटिका" — a garden of tokens & components
   ============================================================ */

:root {
  /* ——— Color: brand ——— */
  --saffron-50:  #fff5ec;
  --saffron-100: #ffe6cf;
  --saffron-200: #ffc999;
  --saffron-300: #ffa85c;
  --saffron-400: #f58a2e;
  --saffron-500: #e0701a;   /* PRIMARY */
  --saffron-600: #b8550f;
  --saffron-700: #8c3d09;

  --maroon-50:  #fbeeee;
  --maroon-100: #f3d2d0;
  --maroon-300: #c4625e;
  --maroon-500: #8a2a25;    /* AUTHORITY / headers */
  --maroon-700: #5e1612;
  --maroon-900: #3a0907;

  --cream-50:  #fdfaf3;     /* PAPER */
  --cream-100: #f8f1e1;
  --cream-200: #efe3c6;
  --cream-300: #e0cea2;

  --tulsi-100: #e3eedb;     /* supporting green */
  --tulsi-500: #4f7c3a;
  --tulsi-700: #335024;

  --lotus-100: #fbe2e8;     /* supporting pink */
  --lotus-500: #c8527a;
  --lotus-700: #8a2c52;

  --gold-400: #d4a02a;      /* accents, ribbons */
  --gold-600: #a87a14;

  /* ——— Color: ink ——— */
  --ink-900: #2a1d11;       /* body text on cream */
  --ink-700: #4a3a28;
  --ink-500: #76654f;
  --ink-300: #b3a48a;
  --ink-100: #e6dcc7;

  /* ——— Semantic ——— */
  --bg:           var(--cream-50);
  --bg-elevated:  #fffdf6;
  --surface:      #ffffff;
  --text:         var(--ink-900);
  --text-muted:   var(--ink-500);
  --border:       var(--cream-200);
  --border-strong:var(--cream-300);
  --primary:      var(--saffron-500);
  --primary-ink:  var(--maroon-700);

  /* ——— Type ——— */
  --font-display-en: "Lora", "Source Serif 4", Georgia, serif;
  --font-body-en:    "Mulish", "Inter", -apple-system, sans-serif;
  --font-display-hi: "Yatra One", "Tiro Devanagari Hindi", serif;
  --font-body-hi:    "Mukta", "Hind", system-ui, sans-serif;
  --font-mono:       "JetBrains Mono", ui-monospace, monospace;

  /* type scale (modular, 1.25) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  4rem;      /* 64 */

  /* ——— Spacing (4pt) ——— */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ——— Radii ——— */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ——— Shadow (warm, never gray) ——— */
  --shadow-sm:  0 1px 2px rgba(90, 50, 10, 0.08);
  --shadow-md:  0 4px 12px rgba(90, 50, 10, 0.10), 0 1px 2px rgba(90, 50, 10, 0.06);
  --shadow-lg:  0 12px 32px rgba(90, 50, 10, 0.14), 0 2px 6px rgba(90, 50, 10, 0.08);
  --shadow-glow:0 0 0 4px rgba(224, 112, 26, 0.18);

  /* ——— Motion ——— */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 140ms;
  --dur-med:  220ms;
}

/* ——— Reset ——— */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body-en);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* paper texture — subtle warm noise */
body.paper {
  background-color: var(--cream-50);
  background-image:
    radial-gradient(rgba(138, 42, 37, 0.025) 1px, transparent 1px),
    radial-gradient(rgba(224, 112, 26, 0.02) 1px, transparent 1px);
  background-size: 24px 24px, 36px 36px;
  background-position: 0 0, 12px 12px;
}

/* ——— Typography classes ——— */
.t-display-hi { font-family: var(--font-display-hi); font-weight: 400; letter-spacing: 0; }
.t-display-en { font-family: var(--font-display-en); font-weight: 600; letter-spacing: -0.01em; }
.t-body-hi    { font-family: var(--font-body-hi); font-weight: 400; }
.t-body-en    { font-family: var(--font-body-en); font-weight: 400; }
.t-mono       { font-family: var(--font-mono); font-size: var(--text-sm); }

.t-eyebrow {
  font-family: var(--font-body-en);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--maroon-500);
}

.t-quote-hi {
  font-family: var(--font-display-hi);
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--maroon-700);
  font-style: normal;
}

/* ——— Layout ——— */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-8); }
.stack > * + * { margin-top: var(--space-4); }
.row { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }