:root {
   /* =========================
      FONTS
   ========================= */
   --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-heading: Georgia, "Times New Roman", Times, serif;

   /* =========================
      WIDTH
   ========================= */

   --content-width: 720px;
   
   /* =========================
      SPACING
   ========================= */
 
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 20px;
   --space-6: 24px;
   --space-8: 32px;
   --space-10: 40px;
   --space-12: 48px;
   --space-16: 64px;
   --space-20: 80px;
   --space-24: 96px;
 
 
   /* =========================
      BORDER RADIUS
   ========================= */
 
   --radius-sm: 6px;
   --radius-md: 12px;
   --radius-lg: 20px;
   --radius-xl: 28px;
   --radius-full: 999px;
 
 
   /* =========================
      BLUR
   ========================= */
 
   --blur-sm: 6px;
   --blur-md: 12px;
   --blur-lg: 24px;
 
 
   /* =========================
   COLORS
   ========================= */

   --color-black: #000;
   --color-white: #fff;

   --color-gray-100: #f5f5f5;
   --color-gray-200: #e5e5e5;
   --color-gray-500: #6b7280;

   --color-background: #F5F7F4;
   
   /* Primary
      ========================= */

   --color-primary: #1d4ed8;
   --color-on-primary: #fff;

   --color-primary-soft: color-mix(
      in srgb,
      var(--color-primary) 6%,
      var(--color-white)
   );

   --color-primary-light: color-mix(
      in srgb,
      var(--color-primary) 12%,
      var(--color-white)
   );

   --color-primary-dark: color-mix(
      in srgb,
      var(--color-primary) 80%,
      var(--color-black)
   );


   /* Secondary
      ========================= */

   --color-secondary: #0f172a;
   --color-on-secondary: #fff;

   --color-secondary-soft: color-mix(
      in srgb,
      var(--color-secondary) 6%,
      var(--color-white)
   );

   --color-secondary-light: color-mix(
      in srgb,
      var(--color-secondary) 12%,
      var(--color-white)
   );

   --color-secondary-dark: color-mix(
      in srgb,
      var(--color-secondary) 80%,
      var(--color-black)
   );


   /* CTA
      ========================= */

   --color-cta: #e9660e;
   --color-on-cta: #fff;


   /* UI
      ========================= */

   --color-border: rgba(0, 0, 0, 0.08);
   --color-overlay: rgba(0, 0, 0, 0.45);
 
 
   /* =========================
      SHADOWS
   ========================= */
 
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
   --shadow-smd: 0 2px 8px rgba(0, 0, 0, 0.2);
   --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.18);
 
 }