/* === BASE RESET + TOKENS === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand Palette — Tanzanian Flag Inspired */
  --navy: #0C1B2A;
  --navy-light: #132640;
  --ocean: #0F4C75;
  --teal: #1B8A7A;
  --teal-light: #23A893;
  --gold: #D4A843;
  --gold-hover: #C29A3A;
  --amber: #E8913A;
  --slate: #3D4F5F;
  --light-bg: #F4F7FA;
  --off-white: #EEF2F6;
  --white: #FFFFFF;
  --text-primary: #0C1B2A;
  --text-secondary: #3D4F5F;
  --text-muted: #6B7D8F;
  --text-on-dark: #F4F7FA;
  --text-on-dark-muted: #A8B8C8;
  --border-light: rgba(12, 27, 42, 0.08);
  --border-dark: rgba(244, 247, 250, 0.12);

  /* Typography */
  --font-display: 'Sora', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Spacing */
  --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;
  --space-24: 96px;
  --space-32: 128px;

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-max: 1400px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(12, 27, 42, 0.06), 0 1px 2px rgba(12, 27, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(12, 27, 42, 0.08), 0 2px 4px rgba(12, 27, 42, 0.04);
  --shadow-lg: 0 12px 40px rgba(12, 27, 42, 0.12), 0 4px 12px rgba(12, 27, 42, 0.06);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.5vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 1.8vw, 3.5rem);
  --text-hero: clamp(2.75rem, 1.8rem + 2.5vw, 5rem);
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--light-bg);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--navy);
  color: var(--text-on-dark);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  z-index: 9999;
  font-size: var(--text-sm);
}
.skip-link:focus { top: var(--space-4); }

/* Scroll reveal */
.fade-in { opacity: 1; }
@supports (animation-timeline: scroll()) {
  .fade-in {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}
@keyframes reveal-fade { to { opacity: 1; } }

.reveal-up { opacity: 1; }
@supports (animation-timeline: scroll()) {
  .reveal-up {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    animation: reveal-clip linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }
}
@keyframes reveal-clip { to { clip-path: inset(0 0 0 0); opacity: 1; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-in, .reveal-up { opacity: 1; clip-path: none; animation: none; }
}