/* ============================================================
   VARIABLES.CSS — Design Tokens & CSS Custom Properties
   ============================================================ */

:root {
  /* ——— Colour Palette ——— */
  --color-deep:        #0D1F2D;
  --color-forest:      #2D6A4F;
  --color-sage:        #74C69D;
  --color-sand:        #F4E9D8;
  --color-amber:       #E07B39;
  --color-slate:       #4A5568;
  --color-white:       #FDFCF8;

  /* Transparent variants */
  --color-deep-05:     rgba(13, 31, 45, 0.05);
  --color-deep-08:     rgba(13, 31, 45, 0.08);
  --color-deep-12:     rgba(13, 31, 45, 0.12);
  --color-deep-20:     rgba(13, 31, 45, 0.20);
  --color-forest-10:   rgba(45, 106, 79, 0.10);
  --color-forest-15:   rgba(45, 106, 79, 0.15);
  --color-amber-10:    rgba(224, 123, 57, 0.10);
  --color-amber-15:    rgba(224, 123, 57, 0.15);
  --color-white-10:    rgba(253, 252, 248, 0.10);
  --color-white-80:    rgba(253, 252, 248, 0.80);

  /* University Accents — footer & co-branding only */
  --color-uwo:         #4F2683;
  --color-waterloo:    #FFC72C;

  /* ——— Typography ——— */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-heading:  'DM Sans', system-ui, -apple-system, sans-serif;
  --font-body:     'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:     'JetBrains Mono', 'Courier New', Courier, monospace;

  /* ——— Type Scale ——— */
  --text-hero:    clamp(2.8rem, 6vw, 5rem);
  --text-h2:      clamp(1.75rem, 3vw, 2.5rem);
  --text-h3:      clamp(1.2rem, 2vw, 1.5rem);
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-caption: 0.75rem;

  /* ——— Line Heights ——— */
  --lh-hero:  1.05;
  --lh-h2:    1.2;
  --lh-h3:    1.3;
  --lh-body:  1.7;

  /* ——— Spacing ——— */
  --section-py:     clamp(4rem, 8vw, 6rem);
  --container-max:  1200px;
  --container-px:   clamp(1rem, 4vw, 2rem);
  --card-gap:       1.5rem;
  --header-height:  72px;

  /* ——— Border Radius ——— */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ——— Shadows ——— */
  --shadow-sm:  0 1px 3px var(--color-deep-08);
  --shadow-md:  0 4px 16px var(--color-deep-12);
  --shadow-lg:  0 8px 32px var(--color-deep-20);

  /* ——— Transitions ——— */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* ——— Z-Index Scale ——— */
  --z-base:    1;
  --z-card:    10;
  --z-header:  100;
  --z-modal:   200;
  --z-overlay: 190;
}