:root {
  /* Typography */
  --font-family-sans: "Segoe UI", system-ui, sans-serif;
  --font-family-display: Inter, "Segoe UI", system-ui, sans-serif;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 32px;
  --text-fluid-hero-title: clamp(42px, 7vw, 82px);
  --text-fluid-hero-copy: clamp(16px, 2vw, 20px);
  --text-fluid-section-title: clamp(30px, 4vw, 52px);
  --text-fluid-price: clamp(42px, 6vw, 64px);
  --text-fluid-cta-title: clamp(28px, 4vw, 42px);

  /* Layout */
  --layout-max-content: 1200px;
  --breakpoint-landing-tablet: 980px;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 8px;
  --space-2: 10px;
  --space-3: 12px;
  --space-4: 14px;
  --space-5: 16px;
  --space-6: 18px;
  --space-7: 22px;
  --space-8: 24px;
  --space-9: 28px;
  --space-10: 34px;

  /* Brand */
  --color-brand-primary: #295C41;
  --color-brand-secondary: #A3B18A;
  --color-brand-accent: #3A7D6B;

  /* Core surfaces */
  --color-canvas-app: #EEF1EA;
  --color-surface-base: #F9FBF6;
  --color-surface-border: #D7DDD1;

  /* Text */
  --color-text-primary: #243226;
  --color-text-muted: #627067;
  --color-text-inverse: #FFFFFF;

  /* Primary actions */
  --color-action-primary: #295C41;
  --color-action-primary-hover: #1F4532;

  /* Feedback */
  --color-status-danger: #AA3333;
  --color-status-danger-border: #E6B9B9;
  --color-status-warning: #8A2B2B;

  /* Elevation */
  --shadow-surface-subtle: 0 6px 20px rgba(26, 40, 28, 0.05);
  --shadow-surface-card: 0 12px 30px rgba(26, 40, 28, 0.08);
  --shadow-surface-raised: 0 10px 28px rgba(26, 40, 28, 0.08);
  --shadow-surface-prominent: 0 20px 60px rgba(0, 0, 0, 0.16);

  /* Shared interactive surfaces */
  --color-surface-card: rgba(255, 255, 255, 0.8);
  --color-surface-card-strong: rgba(255, 255, 255, 0.88);
  --color-surface-floating: rgba(255, 255, 255, 0.92);
  --color-surface-input: #FFFFFF;
  --color-surface-emphasis: rgba(255, 255, 255, 0.08);
  --color-surface-emphasis-border: rgba(255, 255, 255, 0.15);
  --color-surface-overlay: rgba(36, 50, 38, 0.82);
  --color-border-subtle: rgba(36, 50, 38, 0.08);
  --color-border-strong: rgba(41, 92, 65, 0.1);

  /* Configurator-specific semantic tokens */
  --color-topbar-start: #1F4532;
  --color-topbar-mid: #295C41;
  --color-topbar-end: #3A7D6B;
  --color-topbar-text-muted: rgba(255, 255, 255, 0.72);
  --color-topbar-price: var(--color-brand-secondary);
  --color-lock-enabled: var(--color-brand-accent);
  --color-lock-disabled: var(--color-status-warning);
  --color-sidebar-depth: #F2F6EE;
  --color-editor-surface: linear-gradient(180deg, #FFFFFF 0%, #F7FAF4 100%);
  --color-editor-note-surface: rgba(163, 177, 138, 0.22);
  --color-editor-note-border: #C9D8CB;
  --color-editor-note-text: #496155;
  --color-editor-control-surface: rgba(255, 255, 255, 0.78);

  /* Landing-specific semantic tokens */
  --color-landing-canvas: #0F1713;
  --color-landing-hero-base: #0C120F;
  --color-landing-nav-surface: rgba(15, 23, 19, 0.58);
  --color-landing-nav-border: rgba(255, 255, 255, 0.12);
  --color-landing-glass-surface: rgba(255, 255, 255, 0.10);
  --color-landing-glass-border: rgba(255, 255, 255, 0.18);
  --color-landing-glass-border-strong: rgba(255, 255, 255, 0.14);
  --color-landing-text-muted: rgba(255, 255, 255, 0.82);
  --color-landing-text-soft: rgba(255, 255, 255, 0.86);
  --color-landing-eyebrow: var(--color-brand-secondary);
  --image-landing-hero-overlay: linear-gradient(180deg, rgba(7, 10, 8, 0.45) 0%, rgba(7, 10, 8, 0.58) 100%);
  --image-landing-hero-glow: radial-gradient(circle at 50% 30%, rgba(58, 125, 107, 0.22), transparent 35%);
  --image-landing-stat-surface: linear-gradient(180deg, #1F4532 0%, #295C41 100%);
  --image-landing-cta-surface: linear-gradient(135deg, #1F4532 0%, #295C41 65%, #3A7D6B 100%);
  --color-landing-chip-surface: rgba(41, 92, 65, 0.08);
  --color-landing-chip-border: rgba(255, 255, 255, 0.14);
}