@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500&display=swap');

:root {
  /* ============================================
     LASA DESIGN TOKENS (from DESIGN_BRIEF.md)
     ============================================ */

  /* --- Flag anchors --- */
  --color-navy: #0a3161;
  --color-red-lv: #a4343a;
  --color-red-us: #b31942;

  /* --- Surfaces --- */
  --color-white: #ffffff;
  --color-off-white: #f4f6fb;
  --color-navy-tint: #e8edf7;

  /* --- Text --- */
  --color-text-dark: #1c1c1e;
  --color-text-navy: #0a3161;
  --color-text-muted: #6b7a99;
  --color-text-light: #ffffff;
  --color-text-faint: #8aaad4;

  /* --- Structure --- */
  --color-border: #d6dce8;

  /* --- Alpha overlays (brief-approved UI only) --- */
  --alpha-white-05: rgba(255, 255, 255, 0.05);
  --alpha-white-10: rgba(255, 255, 255, 0.1);
  --alpha-white-40: rgba(255, 255, 255, 0.4);
  --alpha-white-50: rgba(255, 255, 255, 0.5);
  --alpha-white-60: rgba(255, 255, 255, 0.6);
  --alpha-white-80: rgba(255, 255, 255, 0.8);
  --alpha-red-lv-15: rgba(164, 52, 58, 0.15);
  --alpha-red-lv-30: rgba(164, 52, 58, 0.3);

  /* --- Typography --- */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* --- Spacing & layout --- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
  --spacing-2xl: 96px;
  --spacing-3xl: 128px;

  --container-max: 1200px;
  --container-pad: 48px;
  --section-pad: 96px;
  --cta-band-max: 800px;

  /* --- Radii --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
}

/* Basic reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text-dark);
  background: var(--color-white);
  overflow-x: hidden;
}