:root {
  /* Brand colors */
  --color-primary-50:  #F0F4F7;
  --color-primary-100: #E1E7EF;
  --color-primary-200: #C5D0E0;
  --color-primary-300: #93C5FD;
  --color-primary-500: #3B82F6;
  --color-primary-800: #15355E;
  --color-primary-900: #0B2545;

  /* Secondary & status */
  --color-accent:      #38bdf8;
  --color-white:       #FFFFFF;
  --color-success:     #22c55e;
  --color-success-bg:  #f0fdf4;
  --color-danger-bg:   #fef2f2;

  /* Text colors */
  --text-main:         #4B5563;
  --text-secondary:    #6B7280;
  --text-heading:      var(--color-primary-900);
  --text-light:        var(--color-primary-200);

  /* Typography */
  --font-family-base: 'Manrope', sans-serif;

  /* Font weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Font sizes */
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.25rem;
  --fs-2xl:   1.5rem;
  --fs-3xl:   1.875rem;
  --fs-4xl:   2.25rem;
  --fs-5xl:   3rem;
  --fs-6xl:   3.75rem;
  --fs-7xl:   4.5rem;

  /* Section typography hierarchy (hero > section title > subtitle > card title) */
  --section-title:      var(--fs-4xl);
  --section-title-sm:   var(--fs-3xl);
  --section-title-xs:   var(--fs-2xl);
  --section-subtitle:   var(--fs-lg);
  --section-kicker:     var(--fs-xs);
  --section-kicker-dot: 8px;
  --card-title:         var(--fs-lg);
  --card-title-sm:      var(--fs-base);

  /* Line heights */
  --lh-none: 1;
  --lh-tight: 1.25;
  --lh-snug: 1.375;
  --lh-normal: 1.5;
  --lh-relaxed: 1.625;

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout */
  --container-width: 1280px;
  --container-padding-mobile: 1rem;
  --container-padding-desktop: 2rem;
  --header-height: 64px;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}