:root {
  /* Neutral scale: cool gray, never pure black or white. */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  /* Primary scale: restrained cyan-blue for the technology brand. */
  --color-primary-50: #effafc;
  --color-primary-100: #d9f2f7;
  --color-primary-200: #b5e3ed;
  --color-primary-300: #7ecfdf;
  --color-primary-400: #42b3ca;
  --color-primary-500: #218ca8;
  --color-primary-600: #176f8b;
  --color-primary-700: #155970;
  --color-primary-800: #16495b;
  --color-primary-900: #163e4c;

  --color-page: var(--color-gray-50);
  --color-surface: #fdfefe;
  --color-surface-muted: var(--color-gray-100);
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-600);
  --color-border: var(--color-gray-200);
  --color-action: var(--color-primary-700);
  --color-action-hover: var(--color-primary-800);
  --color-focus: var(--color-primary-400);

  /* 8pt spacing scale. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  --space-11: 120px;
  --space-12: 160px;

  /* 1.25 type scale. */
  --font-size-0: 12px;
  --font-size-1: 15px;
  --font-size-2: 18.75px;
  --font-size-3: 23.44px;
  --font-size-4: 29.3px;
  --font-size-5: 36.62px;
  --font-size-6: 45.78px;
  --font-size-7: 57.22px;
  --line-height-tight: 1.12;
  --line-height-heading: 1.24;
  --line-height-body: 1.7;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-family-sans: Inter, "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Two radii only. */
  --radius-sm: 6px;
  --radius-md: 12px;

  /* Soft, low-contrast elevation. */
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05), 0 2px 6px rgb(15 23 42 / 0.04);
  --shadow-md: 0 8px 20px rgb(15 23 42 / 0.08), 0 2px 8px rgb(15 23 42 / 0.05);
  --shadow-lg: 0 20px 48px rgb(15 23 42 / 0.12), 0 6px 18px rgb(15 23 42 / 0.06);

  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-normal: 240ms;
  --duration-slow: 400ms;

  --content-max-width: 1200px;
  --page-gutter: 32px;
  --section-space-desktop: var(--space-11);
  --section-space-mobile: var(--space-8);
}

@media (max-width: 767px) {
  :root {
    --page-gutter: 20px;
  }
}