:root {
  /* =========================
       BRAND COLORS
    ========================== */

  --color-navy-950: #07111f;
  --color-navy-900: #0b1728;
  --color-navy-800: #102238;
  --color-navy-700: #16304d;

  --color-blue: #1769ff;
  --color-blue-dark: #0d54d8;
  --color-blue-light: #eaf2ff;

  --color-white: #ffffff;
  --color-off-white: #f7f9fc;

  --color-text: #172033;
  --color-text-light: #667085;
  --color-muted: #98a2b3;

  --color-border: #e4e8ef;

  /* =========================
       TYPOGRAPHY
    ========================== */

  --font-heading: "Manrope", sans-serif;
  --font-body: "DM Sans", sans-serif;

  /* =========================
       SPACING
    ========================== */

  --container-width: 1240px;

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;
  --space-4xl: 7rem;

  /* =========================
       RADIUS
    ========================== */

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* =========================
       SHADOWS
    ========================== */

  --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.06);

  --shadow-md: 0 10px 30px rgba(16, 24, 40, 0.08);

  --shadow-lg: 0 20px 60px rgba(7, 17, 31, 0.16);

  /* =========================
       TRANSITIONS
    ========================== */

  --transition-fast: 180ms ease;

  --transition-normal: 300ms ease;
}