:root {
  /* Colors: blue */
  --blue-50: #f5f8fc;
  --blue-100: #eff6ff;
  --blue-200: #e6f1fb;
  --blue-300: #93c5fd;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #172554;
  --blue-800: #13284f;
  --blue-900: #0b1b3a;

  /* Colors: neutral */
  --neutral-100: #fbfbfb;
  --neutral-200: #e2e8f0;
  --neutral-300: #d4dbe6;
  --neutral-500: #94a3b8;
  --neutral-600: #6b7280;
  --neutral-700: #64748b;
  --neutral-800: #3a4566;

  /* Colors: base */
  --white-10: rgba(255, 255, 255, 0.1);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-85: rgba(255, 255, 255, 0.85);
  --white-100: #ffffff;
  --black-70: rgba(0, 0, 0, 0.7);
  --black-100: #000000;

  /* Semantic colors */
  --color-brand-pale: var(--blue-100);
  --color-brand-light: var(--blue-300);
  --color-brand: var(--blue-500);
  --color-brand-dark: var(--blue-700);

  --text-inverse-primary: var(--white-100);
  --text-inverse-heading: var(--white-100);
  --text-secondary: var(--neutral-700);
  --text-primary: var(--neutral-800);
  --text-heading-main: var(--black-100);
  --text-heading-brand: var(--blue-900);
  --text-accent: var(--blue-600);

  --bg-base: var(--white-100);
  --bg-surface: var(--blue-50);
  --bg-inverse: var(--blue-900);

  --card-bg-base: var(--white-100);
  --card-bg-surface: var(--neutral-100);
  --card-bg-accent: var(--blue-100);
  --card-bg-inverse: var(--blue-800);

  --border-default-2: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-subtle: var(--blue-100);
  --border-subtle-inverse: var(--blue-300);
  --border-accent: var(--blue-500);

  --action-hover: var(--blue-500);
  --action-default: var(--blue-700);

  /* Typography */
  --font-primary: "Inter", Arial, sans-serif;

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

  /*
   * Fluid typography.
   * The preferred value is tied to viewport width,
   * while clamp() prevents extreme scaling.
   */
  --display-size: clamp(2.75rem, 4.45vw, 4rem);
  --title-size: clamp(3.25rem, 7.25vw, 6.5rem);
  --title-2-size: clamp(2.5rem, 4.45vw, 4rem);

  --h1-size: clamp(2.25rem, 3.9vw, 3.5rem);
  --h2-size: clamp(1.75rem, 2.8vw, 2.5rem);
  --heading-size: clamp(1.5rem, 2.5vw, 2.25rem);
  --h3-size: clamp(1.25rem, 1.95vw, 1.75rem);
  --h4-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  --h5-size: clamp(0.875rem, 1.1vw, 1rem);

  --body-lead-size: clamp(1.125rem, 1.95vw, 1.75rem);
  --body-large-size: clamp(1rem, 1.4vw, 1.25rem);
  --body-regular-size: clamp(0.9375rem, 1.1vw, 1rem);
  --body-small-size: clamp(0.8125rem, 0.98vw, 0.875rem);

  --label-size: clamp(0.8125rem, 0.98vw, 0.875rem);
  --caption-size: clamp(0.6875rem, 0.84vw, 0.75rem);
  --button-primary-size: clamp(0.875rem, 1.05vw, 0.9375rem);
  --button-secondary-size: clamp(0.8125rem, 0.98vw, 0.875rem);

  --display-line: 1.1;
  --title-line: 1;
  --title-2-line: 1.05;
  --h1-line: 1.1;
  --h2-line: 1.2;
  --heading-line: 1.11;
  --h3-line: 1.14;
  --h4-line: 1.2;
  --h5-line: 1.125;
  --body-lead-line: 1.285;
  --body-large-line: 1.5;
  --body-regular-line: 1.5;
  --body-small-line: 1.4;
  --label-line: 1.43;
  --caption-line: 1.5;
  --button-primary-line: 1.33;
  --button-secondary-line: 1.43;

  /* Fluid layout */
  --container-width: 92%;
  --container-max-width: 92vw;
  --page-padding-x: 4vw;

  --section-space: clamp(4rem, 7vw, 8.75rem);
  --section-space-small: clamp(2.5rem, 4vw, 5rem);

  /* Fluid spacing */
  --space-4: clamp(3px, 0.28vw, 4px);
  --space-8: clamp(6px, 0.56vw, 8px);
  --space-12: clamp(9px, 0.84vw, 12px);
  --space-16: clamp(12px, 1.12vw, 16px);
  --space-20: clamp(15px, 1.4vw, 20px);
  --space-24: clamp(18px, 1.68vw, 24px);
  --space-32: clamp(24px, 2.24vw, 32px);
  --space-40: clamp(30px, 2.8vw, 40px);
  --space-48: clamp(36px, 3.36vw, 48px);
  --space-64: clamp(48px, 4.45vw, 64px);
  --space-80: clamp(56px, 5.56vw, 80px);
  --space-96: clamp(64px, 6.67vw, 96px);
  --space-120: clamp(72px, 8.34vw, 120px);

  /* Radius */
  --radius-small: clamp(6px, 0.55vw, 8px);
  --radius-medium: clamp(12px, 1.12vw, 16px);
  --radius-large: clamp(18px, 1.68vw, 24px);
  --radius-round: 999px;

  /* Effects */
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
}

@media (max-width: 767px) {
  :root {
    --container-width: 90%;
    --container-max-width: 90vw;
    --page-padding-x: 5vw;

    --section-space: clamp(3rem, 12vw, 5rem);
    --section-space-small: clamp(2rem, 8vw, 3.5rem);

    --radius-small: clamp(6px, 2vw, 8px);
    --radius-medium: clamp(12px, 4vw, 16px);
    --radius-large: clamp(18px, 6vw, 24px);

    --title-line: 1.1;
    --title-2-line: 1.1;
    --h1-line: 1.11;
    --h2-line: 1.15;
    --heading-line: 1.17;
    --h3-line: 1.2;
    --h5-line: 1.285;
    --body-lead-line: 1.44;
    --body-large-line: 1.625;
    --body-regular-line: 1.6;
  }
}