:root {
  /* =========================
     COLORS
  ========================= */
  --color-bg: #ffffff;
  --color-bg-soft: #f6f8fc;
  --color-bg-dark: #0b1020;
  --color-bg-dark-elevated: #121933;

  --color-surface: #ffffff;
  --color-surface-soft: #f2f5fb;
  --color-surface-dark: #11182d;

  --color-text: #111827;
  --color-text-soft: #4b5563;
  --color-text-muted: #6b7280;
  --color-text-inverse: #f9fafb;

  --color-heading: #0f172a;
  --color-heading-inverse: #ffffff;

  --color-border: #dbe3ef;
  --color-border-strong: #c4d0e3;
  --color-border-dark: rgba(255, 255, 255, 0.14);

  --color-primary: #1d4ed8;
  --color-primary-hover: #1e40af;
  --color-primary-active: #1e3a8a;
  --color-primary-contrast: #ffffff;

  --color-secondary: #0f172a;
  --color-secondary-hover: #111827;
  --color-secondary-contrast: #ffffff;

  --color-accent: #06b6d4;
  --color-accent-soft: rgba(6, 182, 212, 0.12);

  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;

  --color-overlay: rgba(11, 16, 32, 0.72);
  --color-shadow: rgba(15, 23, 42, 0.08);
  --color-shadow-strong: rgba(15, 23, 42, 0.16);

  /* =========================
     TYPOGRAPHY
  ========================= */
  --font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-family-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --font-size-2xs: 0.75rem;   /* 12 */
  --font-size-xs: 0.875rem;   /* 14 */
  --font-size-sm: 1rem;       /* 16 */
  --font-size-md: 1.125rem;   /* 18 */
  --font-size-lg: 1.25rem;    /* 20 */
  --font-size-xl: 1.5rem;     /* 24 */
  --font-size-2xl: 2rem;      /* 32 */
  --font-size-3xl: 2.5rem;    /* 40 */
  --font-size-4xl: 3.25rem;   /* 52 */

  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.08em;

  /* =========================
     SPACING
  ========================= */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-7: 1.75rem;  /* 28 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-14: 3.5rem;  /* 56 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */
  --space-28: 7rem;    /* 112 */
  --space-32: 8rem;    /* 128 */

  /* =========================
     LAYOUT
  ========================= */
  --container-max-width: 1200px;
  --container-padding-inline: 1.25rem;

  --section-padding-y: 5rem;
  --section-padding-y-lg: 6.5rem;
  --section-padding-y-sm: 4rem;

  --grid-gap: 1.5rem;
  --grid-gap-lg: 2rem;

  /* =========================
     RADIUS
  ========================= */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-pill: 999px;

  /* =========================
     SHADOWS
  ========================= */
  --shadow-sm: 0 4px 14px var(--color-shadow);
  --shadow-md: 0 12px 32px var(--color-shadow);
  --shadow-lg: 0 20px 60px var(--color-shadow-strong);
  --shadow-focus: 0 0 0 4px rgba(29, 78, 216, 0.18);

  /* =========================
     BORDERS
  ========================= */
  --border-width-1: 1px;
  --border-width-2: 2px;

  /* =========================
     TRANSITIONS
  ========================= */
  --transition-fast: 160ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 320ms ease;

  /* =========================
     Z-INDEX
  ========================= */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* =========================
     COMPONENT TOKENS
  ========================= */
  --header-height: 5rem;

  --btn-height: 3rem;
  --btn-height-lg: 3.5rem;
  --btn-padding-x: 1.25rem;
  --btn-padding-x-lg: 1.5rem;

  --card-padding: 1.5rem;
  --card-padding-lg: 2rem;

  --hero-content-max-width: 40rem;
  --text-measure: 65ch;

  /* =========================
     TRACKING / TARGET SIZE
  ========================= */
  --target-min-size: 44px;
}

@media (max-width: 1024px) {
  :root {
    --container-padding-inline: 1rem;
    --section-padding-y: 4.5rem;
    --section-padding-y-lg: 5.5rem;
    --grid-gap: 1.25rem;
    --grid-gap-lg: 1.5rem;
    --font-size-3xl: 2.25rem;
    --font-size-4xl: 2.875rem;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding-inline: 1rem;
    --section-padding-y: 4rem;
    --section-padding-y-lg: 4.5rem;
    --section-padding-y-sm: 3rem;

    --font-size-md: 1.0625rem;
    --font-size-lg: 1.1875rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.375rem;

    --header-height: 4.5rem;
    --btn-height: 2.875rem;
    --btn-height-lg: 3.25rem;
    --card-padding: 1.25rem;
    --card-padding-lg: 1.5rem;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding-inline: 0.875rem;
    --section-padding-y: 3.5rem;
    --section-padding-y-lg: 4rem;

    --font-size-2xl: 1.625rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.125rem;

    --grid-gap: 1rem;
    --grid-gap-lg: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms linear;
    --transition-base: 0ms linear;
    --transition-slow: 0ms linear;
  }
}