:root {
  --color-white: #ffffff;
  --color-black: #000000;

  --color-text: #16313f;
  --color-text-light: #f5fbfc;
  --color-muted: #6f8591;

  --color-brand-50: #e8f8f8;
  --color-brand-100: #ccefee;
  --color-brand-200: #a8e3e1;
  --color-brand-300: #7fd7d3;
  --color-brand-400: #4fc9c4;
  --color-brand-500: #1fb8b2;
  --color-brand-600: #0f8f98;
  --color-brand-700: #0c6f7b;
  --color-brand-800: #0a5364;
  --color-brand-900: #12384c;

  --color-surface: #f7fbfc;
  --color-surface-alt: #edf5f7;
  --color-border: rgba(19, 56, 76, 0.12);

  --overlay-dark: rgba(8, 28, 38, 0.58);
  --overlay-brand: rgba(12, 111, 123, 0.34);

  --header-height: 84px;
  --container-width: 1200px;
  --container-padding: 24px;
  --section-padding: 96px;

  --font-family-base: Arial, Helvetica, sans-serif;

  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-32: 2rem;
  --font-size-40: 2.5rem;
  --font-size-56: 3.5rem;

  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;

  --line-height-tight: 1.1;
  --line-height-heading: 1.15;
  --line-height-body: 1.6;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 8px 24px rgba(10, 36, 48, 0.08);
  --shadow-md: 0 18px 50px rgba(10, 36, 48, 0.14);

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}