:root {
  /* ── Colors — Primary ── */
  --color-teal: #1a759f;
  --color-dark-green: #1e3510;

  /* ── Colors — Paint-splash (artwork only) ── */
  --color-orange: #e85d04;
  --color-red: #d00000;
  --color-purple: #6a0572;
  --color-gold: #ffc300;

  /* ── Colors — Project accents ── */
  --color-project-mroc: #1a759f;
  --color-project-koronamonitor: #d00000;
  --color-project-data-lake: #2a8f6a;
  --color-project-fusion: #6a0572;

  /* ── Colors — Semantic ── */
  --color-text-heading: #1e3510;
  --color-text-body: #555555;
  --color-text-on-dark: #ffffff;
  --color-bg-warm-white: #fafaf7;
  --color-bg-warm-grey: #f4f1ec;
  --color-bg-card: #ffffff;
  --color-bg-dark: #1e3510;
  --color-accent: #1a759f;
  --color-focus: #1a759f;

  /* ── Typography — Families ── */
  --font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ── Typography — Sizes ── */
  --text-hero: clamp(2.75rem, 5vw + 1rem, 4rem);
  --text-h1: clamp(2rem, 3.5vw + 0.5rem, 3rem);
  --text-h2: clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
  --text-h3: clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem);
  --text-body: clamp(1rem, 1.1vw, 1.125rem);
  --text-small: 0.875rem;
  --text-xs: 0.75rem;

  /* ── Typography — Weights ── */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ── Typography — Line heights ── */
  --leading-tight: 1.15;
  --leading-normal: 1.6;

  /* ── Spacing ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-section: 72px;
  --space-section-mobile: 40px;

  /* ── Layout ── */
  --max-width: 960px;
  --nav-height: 72px;

  /* ── Radii ── */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* ── Shadows ── */
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-dropdown: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ── Hero gradients (placeholders until real images) ── */
  --hero-home: linear-gradient(135deg, #e85d04 0%, #d00000 30%, #6a0572 60%, #1a759f 100%);
  --hero-fusion: linear-gradient(135deg, #1a759f 0%, #6a0572 50%, #d00000 100%);
  --hero-koronamonitor: linear-gradient(135deg, #d00000 0%, #e85d04 50%, #ffc300 100%);
  --hero-data-lake: linear-gradient(135deg, #2a8f6a 0%, #1a759f 50%, #1e3510 100%);
  --hero-mroc: linear-gradient(135deg, #1a759f 0%, #2a8f6a 50%, #1e3510 100%);
  --hero-about: linear-gradient(135deg, #6a0572 0%, #1a759f 50%, #2a8f6a 100%);
  --hero-contact: linear-gradient(135deg, #1a759f 0%, #6a0572 50%, #d00000 100%);
  --hero-404: linear-gradient(135deg, #e85d04 0%, #d00000 25%, #6a0572 50%, #1a759f 75%, #2a8f6a 100%);
}

@media (max-width: 768px) {
  :root {
    --space-section: var(--space-section-mobile);
  }
}