/* =============================================================================
   TOKENS.CSS — Design tokens, reset, base
   Edit here to change: colors, fonts, global scroll/overflow behavior
   ============================================================================= */

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

/* ─── Design tokens ─── */
:root {
  /* Colors */
  --black:  #000000;
  --white:  #FFFFFF;
  --navy:   #1C2D81;
  --teal:   #5B9E87;
  --yellow: #FFBB00;
  --sky:    #07ACFF;
  --coral:  #FF4144;
  --pink:   #FFDDF2;
  --red:    #FF0000;
  --muted:  rgba(0, 0, 0, 0.45);

  /* Typography */
  --font-display: 'Clash Display', 'Segoe UI', sans-serif;
  --font-serif:   'Cochin', 'Georgia', serif;

  /* Spacing scale */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-2xl: 120px;

  /* Section max-width */
  --max-width: 1200px;
}

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

body {
  position: relative;
  font-family: var(--font-display);
  background: var(--white);
  color: var(--black);
  overflow-x: hidden;
}

/* ─── Scroll-reveal utility ─── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: none;
}