:root {

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 10rem;
  --space-3xl: 12rem;

  /* Colors mapped to theme.json presets with fallbacks */
  --color-primary: var(--wp--preset--color--primary, #254246);
  --color-secondary: var(--wp--preset--color--secondary, #9FB8B8);
  --color-neutral-light: var(--wp--preset--color--neutral-light, #D9D3C9);
  --color-text: var(--wp--preset--color--text, #000500);
  --color-white: var(--wp--preset--color--white, #FFFFFF);

  /* Primitive color scales (50..900) */
  --color-primary-50: color-mix(in srgb, var(--color-primary) 8%, #fff 92%);
  --color-primary-100: color-mix(in srgb, var(--color-primary) 16%, #fff 84%);
  --color-primary-200: color-mix(in srgb, var(--color-primary) 28%, #fff 72%);
  --color-primary-300: color-mix(in srgb, var(--color-primary) 42%, #fff 58%);
  --color-primary-400: color-mix(in srgb, var(--color-primary) 64%, #fff 36%);
  --color-primary-500: var(--color-primary);
  --color-primary-600: color-mix(in srgb, var(--color-primary) 86%, #0f1c1e 14%);
  --color-primary-700: color-mix(in srgb, var(--color-primary) 74%, #0a1416 26%);
  --color-primary-800: color-mix(in srgb, var(--color-primary) 60%, #070d0f 40%);
  --color-primary-900: color-mix(in srgb, var(--color-primary) 42%, #05090a 58%);

  --color-secondary-50: color-mix(in srgb, var(--color-secondary) 12%, #fff 88%);
  --color-secondary-100: color-mix(in srgb, var(--color-secondary) 22%, #fff 78%);
  --color-secondary-200: color-mix(in srgb, var(--color-secondary) 34%, #fff 66%);
  --color-secondary-300: color-mix(in srgb, var(--color-secondary) 48%, #fff 52%);
  --color-secondary-400: color-mix(in srgb, var(--color-secondary) 68%, #fff 32%);
  --color-secondary-500: var(--color-secondary);
  --color-secondary-600: color-mix(in srgb, var(--color-secondary) 78%, var(--color-primary) 22%);
  --color-secondary-700: color-mix(in srgb, var(--color-secondary) 62%, var(--color-primary) 38%);
  --color-secondary-800: color-mix(in srgb, var(--color-secondary) 44%, var(--color-primary) 56%);
  --color-secondary-900: color-mix(in srgb, var(--color-secondary) 30%, var(--color-primary) 70%);

  --color-neutral-50: color-mix(in srgb, var(--color-neutral-light) 16%, #fff 84%);
  --color-neutral-100: color-mix(in srgb, var(--color-neutral-light) 30%, #fff 70%);
  --color-neutral-200: color-mix(in srgb, var(--color-neutral-light) 46%, #fff 54%);
  --color-neutral-300: color-mix(in srgb, var(--color-neutral-light) 62%, #fff 38%);
  --color-neutral-400: color-mix(in srgb, var(--color-neutral-light) 80%, #fff 20%);
  --color-neutral-500: var(--color-neutral-light);
  --color-neutral-600: color-mix(in srgb, var(--color-neutral-light) 78%, var(--color-primary) 22%);
  --color-neutral-700: color-mix(in srgb, var(--color-neutral-light) 58%, var(--color-primary) 42%);
  --color-neutral-800: color-mix(in srgb, var(--color-neutral-light) 40%, var(--color-primary) 60%);
  --color-neutral-900: color-mix(in srgb, var(--color-neutral-light) 26%, var(--color-primary) 74%);

  /* Gray scale for typography/supporting UI */
  --gray-50: #f8f9fa;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --gray-a60: color-mix(in srgb, var(--gray-900) 60%, transparent 40%);
  --gray-a45: color-mix(in srgb, var(--gray-900) 45%, transparent 55%);

  /* Alpha variants */
  --color-primary-a10: color-mix(in srgb, var(--color-primary) 10%, transparent 90%);
  --color-primary-a20: color-mix(in srgb, var(--color-primary) 20%, transparent 80%);
  --color-primary-a40: color-mix(in srgb, var(--color-primary) 40%, transparent 60%);
  --color-primary-a60: color-mix(in srgb, var(--color-primary) 60%, transparent 40%);
  --color-secondary-a10: color-mix(in srgb, var(--color-secondary) 10%, transparent 90%);
  --color-secondary-a20: color-mix(in srgb, var(--color-secondary) 20%, transparent 80%);
  --color-secondary-a40: color-mix(in srgb, var(--color-secondary) 40%, transparent 60%);
  --color-secondary-a60: color-mix(in srgb, var(--color-secondary) 60%, transparent 40%);

  /* Functional Colors & Aliases (Restored) */
  --color-bg: #ffffff;
  --color-bg-soft: #f8fbfb;
  --color-bg-alt: #F5F5F5;
  --color-border: rgba(0, 5, 0, 0.1);
  --color-neutral-1: var(--color-neutral-light);
  --color-accent: var(--color-secondary);
  --color-light-gray: #f0f0f0;
  --color-dark: #0f1c1e;

  /* Text scale (100..900) */
  --text-100: color-mix(in srgb, var(--color-text) 24%, #fff 76%);
  --text-200: color-mix(in srgb, var(--color-text) 34%, #fff 66%);
  --text-300: color-mix(in srgb, var(--color-text) 46%, #fff 54%);
  --text-400: color-mix(in srgb, var(--color-text) 58%, #fff 42%);
  --text-500: color-mix(in srgb, var(--color-text) 72%, #fff 28%);
  --text-600: color-mix(in srgb, var(--color-text) 82%, #fff 18%);
  --text-700: color-mix(in srgb, var(--color-text) 90%, #fff 10%);
  --text-800: color-mix(in srgb, var(--color-text) 96%, #fff 4%);
  --text-900: var(--color-text);

  /* Text semantic tokens */
  --text-primary: var(--text-900);
  --text-strong: var(--color-primary);
  --text-default: var(--gray-800);
  --text-muted: var(--gray-a60);
  --text-soft: var(--gray-600);
  --text-subtle: var(--gray-a45);
  --text-inverse: #ffffff;
  --text-link: var(--color-primary-600);
  --text-link-hover: var(--color-primary-700);

  /* Surface tokens */
  --surface: var(--color-bg);
  --surface-soft: var(--color-bg-soft);
  --surface-muted: var(--color-bg-alt);
  --surface-inverse: var(--color-dark);
  --surface-page: var(--surface);
  --surface-card: var(--surface-muted);
  --surface-elevated: var(--color-white);

  /* Border tokens */
  --border: var(--color-border);
  --border-soft: rgba(0, 5, 0, 0.08);
  --border-strong: rgba(0, 5, 0, 0.16);
  --border-subtle: var(--border-soft);

  /* Shadow tokens */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

  /* Overlay tokens */
  --overlay-soft: rgba(0, 5, 0, 0.2);
  --overlay-strong: rgba(0, 5, 0, 0.35);
  --overlay-premium: linear-gradient(180deg, rgba(15, 28, 30, 0.1) 0%, rgba(15, 28, 30, 0.58) 100%);

  /* Badge tokens */
  --badge-surface: var(--color-neutral-light);
  --badge-contrast: var(--color-primary);
  --badge-border: rgba(0, 5, 0, 0.08);

  /* Status tokens */
  --status-success-surface: #e6f4ea;
  --status-success-contrast: #1e7e34;
  --status-warning-surface: #fff8e1;
  --status-warning-contrast: #f57f17;
  --status-danger-surface: #fce8e6;
  --status-danger-contrast: #c62828;

  /* Header tokens */
  --header-surface: rgba(255, 255, 255, 0.95);
  --header-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);

  /* Button tokens */
  --btn-primary-hover: #2f575c;
  --btn-ghost-bg: rgba(255, 255, 255, 0.08);
  --btn-invert-bg: rgba(255, 255, 255, 0.16);
  --btn-invert-border: rgba(255, 255, 255, 0.7);
  --btn-outline-white-border: rgba(255, 255, 255, 0.6);
  --action-primary: var(--color-primary);
  --action-primary-hover: var(--btn-primary-hover);
  --focus-ring: color-mix(in srgb, var(--color-secondary) 55%, transparent 45%);

  /* Typography mapped to theme.json presets with fallbacks */
  --font-heading: var(--wp--preset--font-family--heading, "Mona Sans", "Inter", sans-serif);
  --font-body: var(--wp--preset--font-family--body, "Mona Sans", "Inter", sans-serif);

  /* Typography Aliases (Restored) */
  --font-primary: var(--font-body);
  --font-main: var(--font-body);
  --type-section-title-size: clamp(2rem, 4vw, 3.2rem);
  --type-feature-title-size: clamp(1.85rem, 2.5vw, 2.45rem);
  --type-card-title-size: clamp(1.35rem, 1.1vw + 1rem, 1.75rem);
  --type-lead-size: clamp(1.03rem, 0.3vw + 0.98rem, 1.125rem);
  --type-body-size: 1rem;
  --type-meta-size: 0.75rem;
  --type-title-tracking: -0.02em;
  --type-feature-tracking: -0.01em;

  /* Layout */
  --container-width: 1280px;
  --container-wide: 1360px;
  --header-height: 80px;

  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-premium: 0.45s cubic-bezier(0.2, 0.9, 0.22, 1);

  /* Card presets */
  --card-primary-surface: var(--color-primary);
  --card-primary-contrast: var(--color-white);
  --card-primary-muted: rgba(255, 255, 255, 0.85);
  --card-primary-border: transparent;
  --card-primary-badge-surface: rgba(255, 255, 255, 0.18);
  --card-primary-badge-contrast: var(--color-white);
  --card-primary-shadow: 0 16px 32px rgba(15, 28, 30, 0.2);
  --card-primary-icon-surface: rgba(255, 255, 255, 0.2);

  --card-secondary-surface: var(--color-secondary);
  --card-secondary-contrast: #1a2f31;
  --card-secondary-muted: rgba(26, 47, 49, 0.72);
  --card-secondary-border: rgba(26, 47, 49, 0.18);
  --card-secondary-badge-surface: rgba(26, 47, 49, 0.08);
  --card-secondary-badge-contrast: #1a2f31;

  --card-neutral-surface: var(--color-neutral-light);
  --card-neutral-contrast: #1a2f31;
  --card-neutral-muted: rgba(26, 47, 49, 0.7);
  --card-neutral-border: rgba(26, 47, 49, 0.18);
  --card-neutral-badge-surface: rgba(26, 47, 49, 0.08);
  --card-neutral-badge-contrast: #1a2f31;

  --card-dark-surface: var(--color-dark);
  --card-dark-contrast: var(--color-white);
  --card-dark-muted: rgba(255, 255, 255, 0.7);
  --card-dark-border: rgba(255, 255, 255, 0.12);
  --card-dark-badge-surface: rgba(255, 255, 255, 0.16);
  --card-dark-badge-contrast: var(--color-white);

  --card-white-surface: var(--color-white);
  --card-white-contrast: var(--color-text);
  --card-white-muted: rgba(0, 5, 0, 0.6);
  --card-white-border: rgba(0, 5, 0, 0.12);
  --card-white-badge-surface: rgba(0, 5, 0, 0.08);
  --card-white-badge-contrast: var(--color-text);
}