/* base.css — CSS variables & reset */

/* ============================================================
   RESET & CSS VARIABLES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green-dark:   #27500A;
  --green-mid:    #3B6D11;
  --green-light:  #EAF3DE;
  --green-border: #C0DD97;
  --teal-dark:    #085041;
  --teal-mid:     #0F6E56;
  --teal-light:   #E1F5EE;
  --teal-border:  #5DCAA5;
  --blue-dark:    #0C447C;
  --blue-mid:     #185FA5;
  --blue-light:   #E6F1FB;
  --blue-border:  #85B7EB;
  --amber-dark:   #633806;
  --amber-mid:    #854F0B;
  --amber-light:  #FAEEDA;
  --amber-border: #FAC775;
  --purple-dark:  #3C3489;
  --purple-mid:   #534AB7;
  --purple-light: #EEEDFE;
  --purple-border:#AFA9EC;
  --coral-dark:   #712B13;
  --coral-mid:    #993C1D;
  --coral-light:  #FAECE7;
  --coral-border: #F0997B;
  --gray-dark:    #2C2C2A;
  --gray-mid:     #5F5E5A;
  --gray-light:   #F1EFE8;
  --gray-border:  #B4B2A9;
  --white:        #ffffff;
  --radius:       10px;
  --shadow:       0 2px 12px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.18);
  --font-body:    'Source Sans 3', sans-serif;
  --font-serif:   'Lora', Georgia, serif;
}

body {
  font-family: var(--font-body);
  background: var(--gray-light);
  color: var(--gray-dark);
  min-height: 100vh;
}