/* Design tokens — derived from the TransAA logo (sky blue + navy + gold accent) */
:root {
  /* Color: navy (serious, trust, dark sections) */
  --color-navy-950: #081b2c;
  --color-navy-900: #0d2c47;
  --color-navy-800: #143a5c;
  --color-navy-700: #1c4a72;

  /* Color: brand blue (movement, sky, links) */
  --color-blue-700: #0a5f9a; /* AA-safe for small/bold text on light backgrounds */
  --color-blue-600: #0f7fc9; /* large text / icons only — fails AA at small sizes on cream */
  --color-blue-500: #1491e0;
  --color-blue-400: #3fa9ea;
  --color-blue-100: #e6f3fc;

  /* Color: gold accent (alive, warm, energetic — pulled from brand mark) */
  --color-gold-600: #dba100;
  --color-gold-500: #ffce37;
  --color-gold-300: #ffe08a;
  --color-gold-100: #fff6dd;

  /* Color: neutrals */
  --color-cream-50: #fbf8f1;
  --color-white: #ffffff;
  --color-ink-900: #10202e;
  --color-ink-700: #33475a;
  --color-ink-500: #5c7186;
  --color-ink-300: #9db0c1;
  --color-line: rgba(13, 44, 71, 0.12);

  /* Soft tinted background blocks (replace heavy solid-dark panels) */
  --color-tint-blue: #eef6fc;
  --color-tint-gold: #fff8e6;

  /* Semantic */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-cream-50);
  --color-bg-dark: var(--color-navy-900);
  --color-text: var(--color-ink-900);
  --color-text-muted: var(--color-ink-500);
  --color-text-on-dark: var(--color-white);
  --color-text-on-dark-muted: var(--color-ink-300);
  --color-accent: var(--color-gold-500);
  --color-accent-hover: var(--color-gold-600);
  --color-brand: var(--color-blue-500);
  --color-success: #1c8a5a;
  --color-error: #c4432c;

  /* Typography — bold, big, geometric sans (no serif) for an energetic, confident tone */
  --font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: clamp(2.75rem, 5.5vw + 1rem, 5.25rem);

  --leading-tight: 1.04;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Shape & elevation */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(13, 44, 71, 0.08);
  --shadow-md: 0 12px 32px rgba(13, 44, 71, 0.14);
  --shadow-lg: 0 24px 64px rgba(13, 44, 71, 0.22);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 500ms;

  /* Layout */
  --container-max: 1180px;
}