/**
 * Do not edit directly, this file was auto-generated.
 *
 * MANUAL ADDITIONS (keep when regenerating):
 *  1. The Google Fonts @import below — index.html loads ONLY this file +
 *     typography.css, so the font families declared here must be imported here.
 *  2. The "LEGACY TOKEN ALIASES" :root block at the bottom of this file.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --button-secondary-background: rgba(0, 0, 0, 0); /** Secondary button transparent background */
  --button-ghost-background: rgba(0, 0, 0, 0); /** Ghost button transparent background */
  --button-ghost-border: rgba(0, 0, 0, 0); /** Ghost button no border */
  --animation-duration-fast: 150ms; /** Fast transition - quick feedback for micro-interactions */
  --animation-duration-base: 200ms; /** Base transition - standard UI interactions */
  --animation-duration-slow: 300ms; /** Slow transition - deliberate, noticeable animations */
  --animation-easing-ease: cubic-bezier(0.25, 0.1, 0.25, 1); /** Default ease curve - natural acceleration/deceleration */
  --animation-easing-ease-in: cubic-bezier(0.42, 0, 1, 1); /** Ease in - starts slow, ends fast */
  --animation-easing-ease-out: cubic-bezier(0, 0, 0.58, 1); /** Ease out - starts fast, ends slow (most common for UI) */
  --animation-easing-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); /** Ease in-out - smooth both directions */
  --animation-easing-linear: cubic-bezier(0, 0, 1, 1); /** Linear - constant speed, no easing */
  --elevation-base: 1; /** Base z-index - default stacking context */
  --elevation-dropdown: 1000; /** Dropdown menus elevation */
  --elevation-sticky: 1020; /** Sticky headers/navigation elevation */
  --elevation-fixed: 1030; /** Fixed positioned elements elevation */
  --elevation-modal-backdrop: 1040; /** Modal backdrop overlay elevation */
  --elevation-modal: 1050; /** Modal dialogs elevation */
  --elevation-popover: 1060; /** Popovers and context menus elevation */
  --elevation-tooltip: 1070; /** Tooltips elevation (highest) */
  --color-brand-green: #59632b; /** Primary olive green - golf course, nature, tradition */
  --color-brand-green-dark: #3f4620; /** Darker shade of primary green for hover states and depth */
  --color-brand-green-light: #6d7738; /** Lighter shade of primary green for subtle accents */
  --color-brand-green-lighter: #9ba36b; /** Much lighter green for backgrounds and tints */
  --color-brand-green-lightest: #e8ebe0; /** Nearly white green for subtle backgrounds */
  --color-brand-gold: #c8a865; /** Complementary gold - prestige, premium (BACKGROUNDS only - 2.27:1 contrast) */
  --color-brand-gold-dark: #a08642; /** Darker gold - safe for text/icons (4.51:1 WCAG AA compliant) */
  --color-brand-gold-light: #d6bc85; /** Light gold for subtle accents */
  --color-brand-gold-lighter: #e8dbb8; /** Very light gold for backgrounds */
  --color-brand-blue: #4a7c9e; /** Fresh blue accent - pool, sky, trust */
  --color-brand-blue-dark: #355a71; /** Darker blue for depth and contrast */
  --color-brand-blue-light: #6b9ab8; /** Lighter blue for subtle accents */
  --color-semantic-success: #15803d; /** Success state color - confirmations, completed states */
  --color-semantic-warning: #d97706; /** Warning state color - cautions, alerts */
  --color-semantic-error: #dc2626; /** Error state color - errors, destructive actions */
  --color-semantic-info: #0284c7; /** Informational state color - tips, helpful information */
  --color-neutral-white: #ffffff; /** Pure white */
  --color-neutral-black: #000000; /** Pure black */
  --color-neutral-gray-50: #fafaf9; /** Lightest gray - subtle backgrounds */
  --color-neutral-gray-100: #f5f5f4; /** Very light gray - secondary surfaces */
  --color-neutral-gray-200: #f3f4f6; /** Light gray - muted backgrounds */
  --color-neutral-gray-300: #e5e7eb; /** Light gray - decorative borders (1.24:1 contrast) */
  --color-neutral-gray-500: #6b7280; /** Medium gray - muted text, interactive borders (4.83:1 WCAG AA) */
  --color-neutral-gray-600: #9ca3af; /** Medium gray - large UI elements (2.93:1 contrast) */
  --color-neutral-gray-700: #374151; /** Dark gray - secondary text */
  --color-neutral-gray-900: #1f2937; /** Very dark gray - primary text, high contrast */
  --color-social-instagram: #e4405f; /** Instagram brand color */
  --color-social-facebook: #1877f2; /** Facebook brand color */
  --color-social-twitter: #1da1f2; /** Twitter/X brand color */
  --color-overlay-white-10: rgba(255, 255, 255, 0.1); /** 10% white overlay */
  --color-overlay-white-20: rgba(255, 255, 255, 0.2); /** 20% white overlay */
  --color-overlay-dark-10: rgba(31, 41, 55, 0.1); /** 10% dark overlay */
  --color-overlay-dark-30: rgba(31, 41, 55, 0.3); /** 30% dark overlay */
  --color-overlay-dark-50: rgba(31, 41, 55, 0.5); /** 50% dark overlay - modal backdrops */
  --color-overlay-primary-8: rgba(89, 99, 43, 0.08); /** 8% primary color overlay - hover states */
  --color-overlay-primary-16: rgba(89, 99, 43, 0.16); /** 16% primary color overlay - active states */
  --color-overlay-primary-24: rgba(89, 99, 43, 0.24); /** 24% primary color overlay - focus states */
  --color-opacity-10: 0.1; /** 10% opacity value */
  --color-opacity-20: 0.2; /** 20% opacity value */
  --color-opacity-50: 0.5; /** 50% opacity value */
  --color-opacity-80: 0.8; /** 80% opacity value */
  --gradient-hero-overlay: linear-gradient(135deg, rgba(89, 99, 43, 0.9) 0%, rgba(74, 124, 158, 0.8) 100%); /** Hero section overlay gradient */
  --gradient-subtle-shine: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%); /** Subtle highlight effect */
  --overlay-dark-subtle: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%); /** Subtle dark overlay for light text over images */
  --overlay-dark-medium: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%); /** Medium dark overlay for readable text */
  --overlay-dark-strong: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%); /** Strong dark overlay for maximum contrast */
  --overlay-olive-subtle: linear-gradient(180deg, transparent 0%, rgba(89, 99, 43, 0.4) 100%); /** Subtle olive brand overlay */
  --overlay-olive-medium: linear-gradient(180deg, rgba(89, 99, 43, 0.3) 0%, rgba(89, 99, 43, 0.7) 100%); /** Medium olive overlay for on-brand feel */
  --overlay-hero: linear-gradient(135deg, rgba(89, 99, 43, 0.85) 0%, rgba(74, 124, 158, 0.75) 100%); /** Hero section gradient overlay (olive to blue) */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /** Extra small shadow - subtle depth for small UI elements */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /** Small shadow - cards at rest, slight elevation */
  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /** Base shadow - standard elevation for cards, buttons */
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /** Medium shadow - dropdowns, popovers, hover states */
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /** Large shadow - modals, overlays, high elevation */
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /** Premium elevation for CTAs */
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /** Maximum elevation for modals/overlays - dramatic depth */
  --spacing-base-0: 0; /** No spacing */
  --spacing-base-1: 0.25rem; /** Extra small spacing - 4px */
  --spacing-base-2: 0.5rem; /** Small spacing - 8px */
  --spacing-base-3: 0.75rem; /** Small-medium spacing - 12px */
  --spacing-base-4: 1rem; /** Medium spacing - 16px (most common) */
  --spacing-base-5: 1.25rem; /** Medium-large spacing - 20px */
  --spacing-base-6: 1.5rem; /** Large spacing - 24px */
  --spacing-base-7: 1.75rem; /** Large spacing - 28px */
  --spacing-base-8: 2rem; /** Extra large spacing - 32px */
  --spacing-base-10: 2.5rem; /** 2XL spacing - 40px */
  --spacing-base-12: 3rem; /** 3XL spacing - 48px */
  --spacing-base-14: 3.5rem; /** 4XL spacing - 56px */
  --spacing-base-16: 4rem; /** 5XL spacing - 64px */
  --spacing-base-20: 5rem; /** 6XL spacing - 80px */
  --spacing-base-24: 6rem; /** 7XL spacing - 96px */
  --spacing-base-32: 8rem; /** 8XL spacing - 128px */
  --spacing-base-unit: 0.5rem; /** Base spacing unit - 8px grid system */
  --spacing-container-xs: 640px; /** Extra small container width - mobile landscape */
  --spacing-container-sm: 768px; /** Small container width - tablet portrait */
  --spacing-container-md: 1024px; /** Medium container width - tablet landscape */
  --spacing-container-lg: 1280px; /** Large container width - desktop */
  --spacing-container-xl: 1536px; /** Extra large container width - wide desktop */
  --spacing-breakpoint-xs: 480px; /** Extra small breakpoint - small phones */
  --spacing-breakpoint-sm: 640px; /** Small breakpoint - large phones */
  --spacing-breakpoint-md: 768px; /** Medium breakpoint - tablets */
  --spacing-breakpoint-lg: 1024px; /** Large breakpoint - laptops */
  --spacing-breakpoint-xl: 1280px; /** Extra large breakpoint - desktops */
  --spacing-breakpoint-2xl: 1536px; /** 2XL breakpoint - large desktops */
  --border-radius-none: 0; /** No border radius - sharp corners */
  --border-radius-sm: 0.25rem; /** Small border radius - 4px */
  --border-radius-base: 0.375rem; /** Base border radius - 6px */
  --border-radius-md: 0.5rem; /** Medium border radius - 8px (most common) */
  --border-radius-lg: 0.75rem; /** Large border radius - 12px */
  --border-radius-xl: 1rem; /** Extra large border radius - 16px */
  --border-radius-2xl: 1.5rem; /** 2XL border radius - 24px */
  --border-radius-full: 9999px; /** Full border radius - circular/pill shape */
  --font-family-heading: 'Cormorant Garamond', Georgia, serif; /** Elegant serif font for headings - traditional, premium feel */
  --font-family-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Clean sans-serif for body text - modern readability */
  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace; /** Monospace font for code and technical content */
  --font-size-xs: 0.75rem; /** Extra small text - 12px - captions, footnotes */
  --font-size-sm: 0.875rem; /** Small text - 14px - secondary content */
  --font-size-base: 1rem; /** Base text - 16px - body copy (default) */
  --font-size-lg: 1.125rem; /** Large text - 18px - emphasized content */
  --font-size-xl: 1.25rem; /** Extra large text - 20px - subheadings */
  --font-size-2xl: 1.563rem; /** 2XL text - 25px - heading level 4 */
  --font-size-3xl: 1.953rem; /** 3XL text - 31px - heading level 3 */
  --font-size-4xl: 2.441rem; /** 4XL text - 39px - heading level 2 */
  --font-size-5xl: 3.052rem; /** 5XL text - 49px - heading level 1 */
  --font-size-6xl: 3.815rem; /** 6XL text - 61px - hero headings */
  --font-size-fluid-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /** Fluid large text - responsive 18-20px */
  --font-size-fluid-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.563rem); /** Fluid XL text - responsive 20-25px */
  --font-size-fluid-2xl: clamp(1.563rem, 1.3rem + 1.25vw, 1.953rem); /** Fluid 2XL text - responsive 25-31px */
  --font-size-fluid-3xl: clamp(1.953rem, 1.6rem + 1.75vw, 2.441rem); /** Fluid 3XL text - responsive 31-39px */
  --font-size-fluid-4xl: clamp(2.441rem, 2rem + 2.2vw, 3.052rem); /** Fluid 4XL text - responsive 39-49px */
  --font-weight-light: 300; /** Light font weight */
  --font-weight-normal: 400; /** Normal font weight (default) */
  --font-weight-medium: 500; /** Medium font weight */
  --font-weight-semibold: 600; /** Semibold font weight */
  --font-weight-bold: 700; /** Bold font weight */
  --font-line-height-tight: 1.25; /** Tight line height - large headings */
  --font-line-height-snug: 1.375; /** Snug line height - medium headings */
  --font-line-height-normal: 1.5; /** Normal line height - UI text */
  --font-line-height-relaxed: 1.75; /** Relaxed line height - long-form content */
  --font-line-height-loose: 2; /** Loose line height - maximum readability */
  --font-line-height-heading-xl: 1.1; /** Line height for hero headings */
  --font-line-height-heading-lg: 1.2; /** Line height for large headings */
  --font-line-height-heading-md: 1.3; /** Line height for medium headings */
  --font-line-height-body: 1.6; /** Line height for body text - optimal readability */
  --font-letter-spacing-tight: -0.025em; /** Tight letter spacing - large headings */
  --font-letter-spacing-normal: 0; /** Normal letter spacing (default) */
  --font-letter-spacing-wide: 0.025em; /** Wide letter spacing - small caps, labels */
  --font-letter-spacing-wider: 0.05em; /** Wider letter spacing - all caps headings */
  --button-primary-border-radius: var(--border-radius-md); /** Primary button corner rounding */
  --button-primary-font-size: var(--font-size-base); /** Primary button text size */
  --button-primary-font-weight: var(--font-weight-medium); /** Primary button text weight */
  --button-primary-shadow: var(--shadow-sm); /** Primary button shadow */
  --button-secondary-border-radius: var(--border-radius-md); /** Secondary button corner rounding */
  --button-secondary-font-size: var(--font-size-base); /** Secondary button text size */
  --button-secondary-font-weight: var(--font-weight-medium); /** Secondary button text weight */
  --button-ghost-border-radius: var(--border-radius-md); /** Ghost button corner rounding */
  --card-border-radius: var(--border-radius-lg); /** Card corner rounding */
  --card-shadow: var(--shadow-sm); /** Card elevation shadow */
  --card-shadow-hover: var(--shadow-md); /** Card shadow on hover state */
  --card-gap: var(--spacing-base-4); /** Gap between card elements */
  --card-header-font-size: var(--font-size-xl); /** Card header text size */
  --card-header-font-weight: var(--font-weight-semibold); /** Card header text weight */
  --card-header-font-family: var(--font-family-heading); /** Card header font family */
  --card-body-font-size: var(--font-size-base); /** Card body text size */
  --card-body-line-height: var(--font-line-height-body); /** Card body line height */
  --color-action-primary: var(--color-brand-green); /** Primary action color - CTAs, primary buttons, important links */
  --color-action-primary-hover: var(--color-brand-green-dark); /** Primary action hover state */
  --color-action-secondary: var(--color-brand-gold-dark); /** Secondary action color - secondary buttons, accent links */
  --color-action-accent: var(--color-brand-blue); /** Accent action color - tertiary actions, info callouts */
  --color-text-body: var(--color-neutral-gray-900); /** Primary body text - high contrast, main content */
  --color-text-secondary: var(--color-neutral-gray-700); /** Secondary text - supporting content, labels */
  --color-text-muted: var(--color-neutral-gray-500); /** Muted text - de-emphasized, placeholders */
  --color-text-inverse: var(--color-neutral-white); /** Inverse text - text on dark backgrounds */
  --color-text-link: var(--color-brand-green); /** Link text color */
  --color-text-link-hover: var(--color-brand-green-dark); /** Link hover state */
  --color-background-primary: var(--color-neutral-white); /** Primary background - page background */
  --color-background-surface: var(--color-neutral-gray-50); /** Surface background - cards, panels */
  --color-background-surface-secondary: var(--color-neutral-gray-100); /** Secondary surface - nested surfaces, hover states */
  --color-background-muted: var(--color-neutral-gray-200); /** Muted background - disabled states, inactive areas */
  --color-background-accent: var(--color-brand-green-lightest); /** Accent background - highlighted sections */
  --color-background-accent-gold: var(--color-brand-gold-lighter); /** Gold accent background - premium sections */
  --color-border-decorative: var(--color-neutral-gray-300); /** Decorative borders - subtle dividers (low contrast ok) */
  --color-border-default: var(--color-neutral-gray-600); /** Default borders - large UI elements */
  --color-border-interactive: var(--color-neutral-gray-500); /** Interactive borders - inputs, buttons (WCAG AA compliant) */
  --color-border-focus: var(--color-brand-green); /** Focus ring color - keyboard navigation */
  --color-state-hover: var(--color-overlay-primary-8); /** Hover overlay - subtle feedback */
  --color-state-active: var(--color-overlay-primary-16); /** Active/pressed overlay */
  --color-state-focus: var(--color-overlay-primary-24); /** Focus overlay - keyboard interaction */
  --color-state-success: var(--color-semantic-success); /** Success state - confirmations, completed */
  --color-state-warning: var(--color-semantic-warning); /** Warning state - cautions, alerts */
  --color-state-error: var(--color-semantic-error); /** Error state - errors, validation failures */
  --color-state-info: var(--color-semantic-info); /** Info state - helpful information */
  --gradient-primary: linear-gradient(135deg, var(--color-brand-green) 0%, var(--color-brand-green-dark) 100%); /** Primary olive gradient */
  --gradient-gold-shimmer: linear-gradient(135deg, var(--color-brand-gold-light) 0%, var(--color-brand-gold) 100%); /** Gold shimmer for premium elements */
  --spacing-component-gap: var(--spacing-base-4); /** Standard gap between component elements */
  --spacing-component-padding: var(--spacing-base-4); /** Standard internal padding for components */
  --spacing-component-padding-large: var(--spacing-base-6); /** Large internal padding for spacious components */
  --spacing-component-button: var(--spacing-base-3); /** Button internal padding (12px) */
  --spacing-component-card: var(--spacing-base-6); /** Card internal padding (24px) */
  --spacing-component-input: var(--spacing-base-3); /** Input field internal padding (12px) */
  --spacing-section-padding: var(--spacing-base-8); /** Section vertical padding (32px) */
  --spacing-section-padding-large: var(--spacing-base-12); /** Large section vertical padding (48px) */
  --spacing-section-gap: var(--spacing-base-12); /** Gap between major sections (48px) */
  --spacing-layout-gutter: var(--spacing-base-4); /** Grid gutter width (16px) */
  --spacing-layout-margin-horizontal: var(--spacing-base-4); /** Horizontal page margins (16px) */
  --spacing-layout-margin-vertical: var(--spacing-base-8); /** Vertical section margins (32px) */
  --zone-hero-background: var(--color-neutral-gray-900); /** Hero section background - dark with overlay */
  --zone-hero-text: var(--color-neutral-white); /** Hero section text color */
  --zone-white-background: var(--color-neutral-white); /** Neutral white sections background */
  --zone-white-text: var(--color-neutral-gray-900); /** Neutral white sections text color */
  --zone-olive-light-background: var(--color-brand-green-lightest); /** Light olive brand section background */
  --zone-olive-light-text: var(--color-brand-green-dark); /** Light olive brand section text color */
  --zone-olive-medium-background: var(--color-brand-green); /** Medium olive brand section background */
  --zone-olive-medium-text: var(--color-neutral-white); /** Medium olive brand section text color (white text) */
  --zone-gold-accent-background: var(--color-brand-gold-lighter); /** Gold accent section background */
  --zone-gold-accent-text: var(--color-neutral-gray-900); /** Gold accent section text color */
  --zone-gold-accent-border: 4px solid var(--color-brand-gold); /** Gold accent section border */
  --zone-blue-accent-background: var(--color-brand-blue-light); /** Blue accent background for trust/calm */
  --zone-blue-accent-text: var(--color-brand-blue-dark); /** Blue accent text color */
  --button-primary-background: var(--color-action-primary); /** Primary button background */
  --button-primary-background-hover: var(--color-action-primary-hover); /** Primary button background on hover */
  --button-primary-text: var(--color-text-inverse); /** Primary button text color (white) */
  --button-primary-padding: var(--spacing-component-button); /** Primary button internal padding */
  --button-secondary-background-hover: var(--color-state-hover); /** Secondary button background on hover */
  --button-secondary-text: var(--color-action-primary); /** Secondary button text matches primary action */
  --button-secondary-border: var(--color-border-interactive); /** Secondary button border */
  --button-secondary-padding: var(--spacing-component-button); /** Secondary button internal padding */
  --button-ghost-background-hover: var(--color-state-hover); /** Ghost button background on hover */
  --button-ghost-text: var(--color-text-body); /** Ghost button text color */
  --button-ghost-padding: var(--spacing-component-button); /** Ghost button internal padding */
  --card-background: var(--color-background-surface); /** Card background color */
  --card-border: var(--color-border-decorative); /** Card border color */
  --card-padding: var(--spacing-component-card); /** Card internal padding */
  --card-header-color: var(--color-text-body); /** Card header text color */
  --card-body-color: var(--color-text-secondary); /** Card body text color */
  --button-primary-border: var(--button-primary-background); /** Primary button border matches background */

  /* ==========================================================================
     LEGACY TOKEN ALIASES — MANUALLY APPENDED, keep when regenerating.
     Bridge: design-system/theme-tokens.css (the OLD names, which index.html
     never loads) -> the generated names above. Components and typography.css
     still reference the old names; without these aliases every fallback-less
     var() computes to `unset`. Names theme-tokens.css defines that the
     generated set already declares identically (--color-text-secondary,
     --color-text-muted, --color-border-interactive, --font-family-heading,
     --font-family-mono, --font-size-*, --font-weight-*, --shadow-*) are NOT
     re-declared here.
     ========================================================================== */

  /* Brand colors */
  --color-primary: var(--color-brand-green);
  --color-primary-rgb: 89, 99, 43;
  --color-primary-dark: var(--color-brand-green-dark);
  --color-primary-dark-rgb: 63, 70, 32;
  --color-primary-light: var(--color-brand-green-light);
  --color-primary-lighter: var(--color-brand-green-lighter);
  --color-primary-lightest: var(--color-brand-green-lightest);
  --color-secondary: var(--color-brand-gold);
  --color-secondary-bg: var(--color-brand-gold);
  --color-secondary-text: #8b7235; /* no generated equivalent (gold-dark is #a08642) */
  --color-secondary-dark: #8a7539; /* no generated equivalent */
  --color-secondary-hover: var(--color-brand-gold-dark);
  --color-secondary-light: var(--color-brand-gold-light);
  --color-secondary-lighter: var(--color-brand-gold-lighter);
  --color-gold: var(--color-brand-gold);
  --color-gold-light: var(--color-brand-gold-light);
  --color-accent: var(--color-brand-blue);
  --color-accent-dark: var(--color-brand-blue-dark);
  --color-accent-light: var(--color-brand-blue-light);

  /* Semantic colors */
  --color-success: var(--color-semantic-success);
  --color-warning: var(--color-semantic-warning);
  --color-error: var(--color-semantic-error);
  --color-info: var(--color-semantic-info);

  /* Neutral colors */
  --color-text: var(--color-neutral-gray-900);
  --color-text-light: var(--color-neutral-gray-500);
  --color-white: var(--color-neutral-white);
  --color-black: var(--color-neutral-black);
  --color-background: var(--color-background-primary);
  --color-surface: var(--color-background-surface);
  --color-surface-secondary: var(--color-background-surface-secondary);
  --color-bg-muted: var(--color-background-muted);
  --color-border: var(--color-border-decorative);
  --color-border-dark: var(--color-neutral-gray-600);

  /* Interactive states */
  --color-hover: var(--color-state-hover);
  --color-active: var(--color-state-active);
  --color-focus: var(--color-state-focus);
  --color-focus-visible: var(--color-border-focus); /* solid focus-ring color (opaque, forced-colors safe) */

  /* Social media */
  --color-instagram: var(--color-social-instagram);
  --color-facebook: var(--color-social-facebook);
  --color-twitter: var(--color-social-twitter);

  /* Transparency & overlays */
  --opacity-10: var(--color-opacity-10);
  --opacity-20: var(--color-opacity-20);
  --opacity-50: var(--color-opacity-50);
  --opacity-80: var(--color-opacity-80);
  --overlay-white-10: var(--color-overlay-white-10);
  --overlay-white-20: var(--color-overlay-white-20);
  --overlay-dark-10: var(--color-overlay-dark-10);
  --overlay-dark-50: var(--color-overlay-dark-50);
  --color-transparent-white-20: var(--color-overlay-white-20);
  --color-transparent-dark-30: var(--color-overlay-dark-30);
  --color-overlay-dark: var(--color-overlay-dark-50);

  /* Typography */
  --font-family-base: var(--font-family-body);
  --line-height-tight: var(--font-line-height-tight);
  --line-height-snug: var(--font-line-height-snug);
  --line-height-normal: var(--font-line-height-normal);
  --line-height-relaxed: var(--font-line-height-relaxed);
  --line-height-loose: var(--font-line-height-loose);
  --line-height-heading-xl: var(--font-line-height-heading-xl);
  --line-height-heading-lg: var(--font-line-height-heading-lg);
  --line-height-heading-md: var(--font-line-height-heading-md);
  --line-height-body: var(--font-line-height-body);
  --letter-spacing-tight: var(--font-letter-spacing-tight);
  --letter-spacing-normal: var(--font-letter-spacing-normal);
  --letter-spacing-wide: var(--font-letter-spacing-wide);
  --letter-spacing-wider: var(--font-letter-spacing-wider);

  /* Spacing - 8px base unit */
  --spacing-unit: var(--spacing-base-unit);
  --spacing-0: var(--spacing-base-0);
  --spacing-1: var(--spacing-base-1);
  --spacing-2: var(--spacing-base-2);
  --spacing-3: var(--spacing-base-3);
  --spacing-4: var(--spacing-base-4);
  --spacing-5: var(--spacing-base-5);
  --spacing-6: var(--spacing-base-6);
  --spacing-7: var(--spacing-base-7);
  --spacing-8: var(--spacing-base-8);
  --spacing-10: var(--spacing-base-10);
  --spacing-12: var(--spacing-base-12);
  --spacing-14: var(--spacing-base-14);
  --spacing-16: var(--spacing-base-16);
  --spacing-20: var(--spacing-base-20);
  --spacing-24: var(--spacing-base-24);
  --spacing-32: var(--spacing-base-32);

  /* Semantic spacing */
  --spacing-section-mobile: var(--spacing-base-8);
  --spacing-section-desktop: var(--spacing-base-12);
  --spacing-component-mobile: var(--spacing-base-4);
  --spacing-component-desktop: var(--spacing-base-6);
  --spacing-inline: var(--spacing-base-2);
  --spacing-stack: var(--spacing-base-4);
  --spacing-card-padding: var(--spacing-base-4);

  /* Container widths */
  --container-xs: var(--spacing-container-xs);
  --container-sm: var(--spacing-container-sm);
  --container-md: var(--spacing-container-md);
  --container-lg: var(--spacing-container-lg);
  --container-xl: var(--spacing-container-xl);

  /* Border radius */
  --radius-none: var(--border-radius-none);
  --radius-sm: var(--border-radius-sm);
  --radius-base: var(--border-radius-base);
  --radius-md: var(--border-radius-md);
  --radius-lg: var(--border-radius-lg);
  --radius-xl: var(--border-radius-xl);
  --radius-2xl: var(--border-radius-2xl);
  --radius-full: var(--border-radius-full);
  --radius-interactive: var(--border-radius-base);
  --radius-card: var(--border-radius-lg);
  --radius-modal: var(--border-radius-xl);
  --radius-avatar: var(--border-radius-full);

  /* Z-index scale */
  --z-base: var(--elevation-base);
  --z-dropdown: var(--elevation-dropdown);
  --z-sticky: var(--elevation-sticky);
  --z-fixed: var(--elevation-fixed);
  --z-modal-backdrop: var(--elevation-modal-backdrop);
  --z-modal: var(--elevation-modal);
  --z-popover: var(--elevation-popover);
  --z-tooltip: var(--elevation-tooltip);

  /* Transitions (duration + easing shorthand fragments) */
  --transition-fast: var(--animation-duration-fast) ease;
  --transition-base: var(--animation-duration-base) ease;
  --transition-slow: var(--animation-duration-slow) ease;

  /* Motion tokens */
  --motion-duration-instant: 100ms;
  --motion-duration-fast: var(--animation-duration-fast);
  --motion-duration-base: 250ms; /* theme-tokens value; generated base is 200ms */
  --motion-duration-slow: 400ms; /* theme-tokens value; generated slow is 300ms */
  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* Breakpoints (for use in JS) */
  --breakpoint-xs: var(--spacing-breakpoint-xs);
  --breakpoint-sm: var(--spacing-breakpoint-sm);
  --breakpoint-md: var(--spacing-breakpoint-md);
  --breakpoint-lg: var(--spacing-breakpoint-lg);
  --breakpoint-xl: var(--spacing-breakpoint-xl);
  --breakpoint-2xl: var(--spacing-breakpoint-2xl);

  /* Referenced in src/ without any theme-tokens.css definition — best-fit mappings */
  --color-surface-hover: var(--color-background-surface-secondary);
  --color-surface-muted: var(--color-background-muted);
  --font-family-display: var(--font-family-heading);
  --radius-3xl: 2rem; /* one step above --border-radius-2xl (1.5rem); no generated equivalent */
}