/*
  Breakpoints (mobile-first — base styles target the 393px mobile design,
  then override upward as each min-width is reached):
    Mobile:  393px  (base, no media query)
    Tablet:  744px  -> @media (min-width: 744px)
    Laptop:  1100px -> @media (min-width: 1100px)  (design target 1440px, held from 1100px
                                                     so real laptop windows in the 1100-1439px
                                                     range still get the laptop layout instead
                                                     of falling back to the tablet stack)
    Desktop: 1920px -> @media (min-width: 1920px)
*/

:root {
  /* Colors — from Figma design tokens */
  --brand-navy: #013a81;
  --accent-600: #3a6ec2;
  --accent-700: #285392;
  --accent-800: #1c3d6b;
  --accent-900: #0d2440;
  --accent-100: #eaf1fc;
  --accent-200: #cfe1f8;
  --accent-300: #aac9f0;
  --accent-400: #82ade3;
  --accent-500: #5c8fd1;
  --sky-600: #2f68b3;
  --shadow-navy: #1f4e8c;
  --neutral-100: #f5f5f8;
  --neutral-300: #d4d4d7;
  --neutral-600: #7a7a7d;
  --neutral-700: #5d5d60;
  --neutral-800: #424244;
  --neutral-900: #2b2b2d;
  --form-label: #3d3636;
  --overlay-dark: rgba(22, 22, 22, 0.39);
  --color-bg: #ffffff;
  --color-text: #161616;

  /* Typography */
  --font-heading: "Barlow Condensed", Arial, sans-serif;
  --font-body: "Barlow", Arial, sans-serif;

  /* Layout */
  --container-max-width: 1920px;
  --container-padding: 24px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
}

@media (min-width: 744px) {
  :root {
    --container-padding: 40px;
  }
}

@media (min-width: 1100px) {
  :root {
    --container-padding: 120px;
  }
}