:root {
  /* VIP Business Golf Network — Global Brand & Surface Tokens (Dark default) */
  --brand-gold: #BF9C62;                 /* sampled from the supplied vector logo */
  --brand-gold-light: #D6B77C;
  --brand-gold-soft: #E7D4AD;
  --brand-gold-deep: #987541;
  --brand-black: #050505;
  --brand-charcoal: #111110;
  --brand-emerald: #18372B;             /* restrained golf-heritage accent */

  /* Global Golf Ball Icon tokens — the filled silhouette uses currentColor. */
  --icon-golf-ball-cursor-color: #FFFFFF;
  --icon-golf-ball-dimple-color: rgba(31, 32, 31, .28);
  --icon-golf-ball-outline-color: rgba(20, 20, 20, .22);
  --icon-golf-ball-highlight-color: rgba(255, 255, 255, .62);
  --icon-golf-ball-dimple-highlight-color: rgba(255, 255, 255, .28);

  --surface-canvas: var(--brand-black);
  --surface-raised: #0B0B0A;
  --surface-card: #111110;
  --surface-elevated: #181715;
  --surface-input: #0D0D0C;
  --surface-overlay: rgba(8, 8, 7, .96);
  --surface-hover: rgba(191, 156, 98, .10);
  --surface-active: rgba(191, 156, 98, .17);
  --surface-subtle: #15130F;
  --surface-inverse: #F5F1E9;

  --text-primary: #F5F1E9;
  --text-secondary: #C5BCAE;
  --text-muted: #978D7D;
  --text-on-primary: #080706;
  --border-color: #302A22;
  --border-color-subtle: rgba(191, 156, 98, .20);
  --border-color-hover: rgba(191, 156, 98, .48);
  --focus-ring-color: rgba(191, 156, 98, .38);

  --color-primary: var(--brand-gold);
  --color-dark: var(--text-primary);
  --color-white: #FFFFFF;
  --color-background: var(--surface-canvas);
  --color-border: var(--border-color);
  --color-secondary-text: var(--text-secondary);
  --color-on-primary: var(--text-on-primary);

  /*
   * VIP Business Golf Network Design System — Extended Color System
   *
   * Source of truth for brand, neutral, semantic, interaction, surface,
   * and gradient colors. Components should consume semantic tokens instead
   * of hard-coding HEX values.
   */

  /* Legacy blue aliases now resolve to the customer’s champagne-gold palette. */
  --color-blue-900: #6B4D25;
  --color-blue-800: #805D2E;
  --color-blue-700: #9B743D;
  --color-blue-600: #BF9C62;
  --color-blue-500: #C9AA77;
  --color-blue-400: #D6B77C;
  --color-blue-300: #E1C99A;
  --color-blue-200: #EAD9B6;
  --color-blue-100: #F2E8D2;
  --color-blue-50: #19150E;

  /* Supporting accents: warm stone and restrained golf-heritage green. */
  --color-cyan-600: #607B6D;
  --color-cyan-500: #829988;
  --color-cyan-200: #C4D0C5;
  --color-cyan-50: #151D17;

  --color-indigo-600: #75664F;
  --color-indigo-400: #A79A82;
  --color-indigo-200: #D5CBBB;
  --color-indigo-50: #1B1812;

  --color-violet-600: #725638;
  --color-violet-400: #B79A6C;
  --color-violet-200: #E3D1B0;
  --color-violet-50: #1C160D;

  /* Warm neutral accent used by the Free Website Design process label. */
  --color-beige-50: #F7F1E7;

  /* Neutral scale */
  --color-neutral-950: #000000;
  --color-neutral-900: #0A0A0A;
  --color-neutral-800: #151413;
  --color-neutral-700: #282622;
  --color-neutral-600: #464137;
  --color-neutral-500: #958B7C;
  --color-neutral-400: #B9B0A3;
  --color-neutral-300: #D4CCBF;
  --color-neutral-200: #E3DDD2;
  --color-neutral-100: #F1EDE5;
  --color-neutral-50: #FAF8F3;

  /* Semantic states */
  --color-success: #16A34A;
  --color-success-dark: #15803D;
  --color-success-soft: #DCFCE7;

  --color-warning: #F59E0B;
  --color-warning-dark: #B45309;
  --color-warning-soft: #FEF3C7;

  --color-error: #DC2626;
  --color-error-dark: #B91C1C;
  --color-error-soft: #FEE2E2;

  --color-info: #BFA875;
  --color-info-dark: #8E7445;
  --color-info-soft: #1C1810;

  /* Interaction states */
  --color-primary-hover: var(--brand-gold-light);
  --color-primary-active: var(--brand-gold-deep);
  --color-hover-surface: var(--surface-hover);
  --navigation-item-radius: var(--radius-lg);
  --navigation-item-min-height: 34px;
  --navigation-item-padding-inline: 6px;

  /* Header layout tokens */
  --header-height-desktop: 80px;
  --header-height-tablet: 64px;
  --header-height-mobile: 64px;
  --header-top-gap: 3px;
  --header-padding-desktop: 40px;
  /* Desktop header content stops at this maximum width while the header background remains full-bleed. */
  --header-content-max-width: 1440px;
  --header-padding-tablet: 16px;
  --header-padding-mobile: 16px;
  --header-logo-height-desktop: 32px;
  --header-logo-height-mobile: 26px;
  --header-mobile-menu-size: 32px;
  --header-mobile-icon-size: 20px;
  --header-brand-control-gap: 0px;
  --header-mobile-action-height: 30px;
  --header-mobile-action-padding: 10px;
  --header-mobile-action-font-size: var(--font-button-xs);
  /* Guest authentication buttons in the desktop header touch as a single compact group. */
  --header-auth-actions-gap: 8px;
  /* Header auth controls on saturated/transparent hero surfaces. */
  --header-auth-signup-top-bg: rgba(255,255,255,.06);
  --header-auth-signup-top-border: rgba(255,255,255,.35);
  --header-auth-signup-top-hover-bg: var(--navigation-hover-surface-on-dark);
  --header-auth-signup-top-hover-border: var(--navigation-hover-border-on-dark);
  --header-auth-signup-top-blur: var(--navigation-hover-blur);
  --header-auth-login-top-bg: rgba(255,255,255,.55);
  --header-auth-login-top-hover-bg: var(--color-white);
  --header-auth-login-top-border: rgba(255,255,255,.72);
  --header-auth-login-top-hover-border: var(--color-white);
  --header-auth-login-top-text: var(--color-dark);
  --header-auth-transition: var(--navigation-hover-indicator-transition);
  /* Navigation item interaction surfaces: subtle glass, never opaque white. */
  --navigation-hover-surface-on-dark: rgba(255,255,255,.10);
  --navigation-hover-border-on-dark: rgba(255,255,255,.18);
  --navigation-hover-surface-on-light: color-mix(in srgb, var(--brand-gold) 12%, transparent);
  --navigation-hover-border-on-light: color-mix(in srgb, var(--brand-gold) 30%, transparent);
  --navigation-hover-blur: 8px;
  --navigation-hover-indicator-transition: var(--motion-normal) var(--ease-standard);
  --navigation-fit-buffer: 24px;
  --navigation-mobile-breakpoint: 767px;
  /* Compact header lower bound matching the supplied Canva tablet state. */
  --navigation-compact-max-width: 1023px;
  --navigation-active-surface-on-dark: rgba(255,255,255,.12);
  /* Mega-menu glass surface: translucent, blurred, and intentionally not opaque white. */
  --navigation-mega-surface: rgba(255,255,255,.80);
  --navigation-mega-surface-on-solid: rgba(255,255,255,.90);
  --navigation-mega-border: rgba(255,255,255,.58);
  --border-glass: rgba(255,255,255,.58);
  --navigation-mega-blur: 22px;
  --navigation-mega-saturate: 125%;
  --navigation-mega-shadow: 0 16px 48px rgba(16,24,40,.14), 0 4px 16px rgba(16,24,40,.08);

  /* Reusable premium light frosted-glass recipe for Hero trust/stat panels. */
  --hero-stats-glass-surface: rgba(255,255,255,.08);
  --hero-stats-glass-surface-strong: rgba(255,255,255,.10);
  --hero-stats-glass-border: rgba(255,255,255,.25);
  --hero-stats-glass-blur: 14px;
  --hero-stats-glass-saturate: 115%;
  --hero-stats-glass-shadow: 0 10px 30px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.14);
  --hero-stats-glass-fallback: rgba(255,255,255,.06);
  --hero-stats-glass-surface-3d: rgba(255,255,255,.08);
  --hero-stats-glass-surface-3d-strong: rgba(255,255,255,.10);
  --hero-stats-glass-highlight: rgba(255,255,255,.18);
  --hero-stats-glass-sheen: rgba(255,255,255,.08);
  --hero-stats-glass-depth-shadow: 0 10px 30px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.14);

  /* Clean Hero stats surface — no glass, no blur, only a subtle brand outline. */
  --hero-stats-surface-clean: var(--color-white);
  --hero-stats-border-clean: color-mix(in srgb, var(--brand-gold) 30%, transparent);
  --hero-stats-shadow-clean: none;
  --hero-stats-number-clean: var(--brand-gold-deep);
  --hero-stats-label-clean: var(--text-primary);
  --hero-stats-divider-clean: color-mix(in srgb, var(--brand-gold) 18%, transparent);
  --hero-stats-spacing-y: var(--space-16);
  --hero-stats-spacing-x: var(--space-24);
  --hero-stats-spacing-y-tablet: var(--space-12);
  --hero-stats-spacing-x-tablet: var(--space-16);
  --hero-stats-spacing-y-mobile: var(--space-8);
  --hero-stats-spacing-x-mobile: var(--space-8);

  /* VIP BUSINESS GOLF NETWORK GLOBAL MEGA MENU COMPONENT — v1.0
   * Desktop sizing is content-aware; tablet/mobile behavior follows the
   * supplied Canva-style drawer/subpanel reference. Components consume these
   * tokens instead of introducing one-off visual values.
   */
  --navigation-list-gap: var(--space-4);
  --mega-menu-offset-y: 10px;
  --mega-menu-viewport-edge: var(--space-16);
  --mega-menu-z-index: 1225;
  --mega-menu-backdrop-z-index: 1210;
  --mega-menu-backdrop-blur: 8px;
  --mega-menu-backdrop-saturate: 110%;
  --mega-menu-backdrop-surface: rgba(255,255,255,.08);
  --mega-menu-backdrop-transition: 140ms;
  --mega-menu-min-width: 240px;
  --mega-menu-column-min-width: 236px;
  --mega-menu-max-width: calc(100vw - (var(--mega-menu-viewport-edge) * 2));
  --mega-menu-padding: 4px;
  --mega-menu-radius: var(--radius-2xl);
  --mega-menu-border-width: 1px;
  --mega-menu-border: var(--border-glass);
  --mega-menu-divider-width: 1px;
  --mega-menu-divider: var(--border-color);
  --mega-menu-surface: var(--surface-overlay);
  --mega-menu-blur: 18px;
  --mega-menu-saturate: 120%;
  --mega-menu-shadow: var(--shadow-overlay);
  --mega-menu-enter-offset: 8px;
  --mega-menu-enter-scale: var(--motion-enter-scale);
  --mega-menu-transition-duration: var(--motion-medium);
  --mega-menu-item-transition-duration: var(--motion-slow);
  --mega-menu-item-stagger-step: 50ms;
  --mega-menu-transition-ease: var(--ease-enter);
  --mega-menu-column-padding-block: 20px;
  --mega-menu-column-padding-inline: 24px;
  --mega-menu-column-first-padding: 24px;
  --mega-menu-heading-gap: 8px;
  --mega-menu-heading-color: var(--color-secondary-text);
  --mega-menu-heading-size: 12.5px;
  --mega-menu-heading-weight: var(--font-weight-medium);
  --mega-menu-heading-line: var(--line-small);
  --mega-menu-group-gap: 18px;
  --mega-menu-item-padding-block: 0;
  --mega-menu-item-padding-inline: 10px;
  --mega-menu-item-height: 40px;
  --mega-menu-item-gap: 6px;
  --mega-menu-item-radius: 8px;
  --mega-menu-item-color: var(--text-primary);
  --mega-menu-item-hover-color: var(--text-on-primary);
  --mega-menu-item-hover-surface: var(--surface-hover);
  --mega-menu-item-hover-shadow: inset 0 0 0 1px rgba(191,156,98,.28), 0 4px 12px rgba(0,0,0,.22);
  --mega-menu-item-size: 13.5px;
  --mega-menu-item-weight: var(--font-weight-medium);
  --mega-menu-item-line: 1.45;
  --mega-menu-description-gap: var(--space-4);
  --mega-menu-description-color: var(--color-secondary-text);
  --mega-menu-description-size: var(--font-label);
  --mega-menu-description-line: var(--line-caption);
  --mega-menu-promo-gap: var(--space-8);
  --mega-menu-promo-padding: var(--space-24);
  --mega-menu-promo-radius: var(--radius-xl);
  --mega-menu-promo-surface: var(--color-primary);
  --mega-menu-promo-badge-gap: var(--space-8);
  --mega-menu-promo-badge-padding-block: var(--space-4);
  --mega-menu-promo-badge-padding-inline: var(--space-8);
  --mega-menu-promo-badge-border-width: var(--border-width-subtle);
  --mega-menu-promo-badge-border: rgba(255,255,255,.24);
  --mega-menu-promo-badge-surface: rgba(255,255,255,.10);
  --mega-menu-promo-badge-size: var(--font-label);
  --mega-menu-promo-badge-tracking: .05em;
  --mega-menu-promo-title-gap: var(--space-8);
  --mega-menu-promo-title-size: var(--font-h5);
  --mega-menu-promo-title-weight: var(--font-weight-medium);
  --mega-menu-promo-title-line: var(--line-h5);
  --mega-menu-promo-copy-gap: var(--space-16);
  --mega-menu-promo-copy-color: rgba(255,255,255,.82);
  --mega-menu-promo-copy-size: var(--font-small-body);
  --mega-menu-promo-copy-line: var(--line-small);

  /* Tablet/mobile drawer and subpanel */
  --mega-menu-mobile-drawer-z-index: 1302;
  /* V42 compact drawer alignment/sizing tokens. */
  --mega-menu-tablet-auth-side-padding: 8px;
  --mega-menu-tablet-drawer-top: var(--header-height-tablet);
  --mega-menu-tablet-auth-bottom-padding: 8px;
  --mega-menu-tablet-auth-gap: 6px;
  /* Tablet shell: Canva-style compact left navigation drawer. */
  --mega-menu-tablet-drawer-width: min(360px, 55vw);
  --mega-menu-tablet-backdrop-blur: 4px;
  --mega-menu-tablet-auth-button-height: var(--button-height-sm);
  --mega-menu-tablet-auth-padding: 12px;
  --mega-menu-tablet-auth-gap: 6px;
  --mega-menu-tablet-nav-item-radius: 0;
  --header-tablet-menu-icon-size: 24px;
  --header-tablet-menu-hover-duration: 100ms;
  --header-tablet-menu-opacity-duration: 150ms;
  --header-tablet-menu-press-duration: 70ms;
  --header-tablet-menu-button-size: 32px;
  --header-tablet-menu-icon-size: 24px;
  --header-tablet-menu-hover-surface: rgba(191,156,98,.10);
  --header-tablet-menu-hover-border: rgba(191,156,98,.24);
  --header-tablet-menu-active-transform: scale(.95);
  --header-tablet-menu-press-surface: rgba(191,156,98,.18);
  --header-tablet-menu-press-border: rgba(191,156,98,.38);
  --header-tablet-menu-press-icon-scale: .90;
  --header-tablet-drawer-transition-duration: 280ms;
  --header-tablet-drawer-transition-ease: cubic-bezier(.22,1,.36,1);
  --header-tablet-panel-transition-duration: 260ms;
  --header-tablet-panel-transition-ease: cubic-bezier(.22,1,.36,1);
  --header-tablet-panel-item-duration: 320ms;
  --header-tablet-panel-item-stagger: 28ms;
  --header-tablet-panel-item-ease: cubic-bezier(.22,1,.36,1);
  --header-tablet-panel-item-offset: -8px;
  --mega-menu-tablet-title-size-refined: 20px;
  --mega-menu-tablet-title-margin-bottom-refined: 20px;
  --mega-menu-tablet-group-margin-top-refined: 14px;
  --mega-menu-tablet-group-margin-bottom-refined: 8px;
  --mega-menu-tablet-group-size-refined: 13px;
  --mega-menu-tablet-link-height-refined: 42px;
  --mega-menu-tablet-link-size-refined: 15px;
  --mega-menu-tablet-title-color: var(--color-dark);
  --mega-menu-tablet-title-weight: var(--font-weight-medium);
  --mega-menu-tablet-group-color: var(--color-secondary-text);
  --mega-menu-tablet-group-weight: var(--font-weight-regular);
  --mega-menu-tablet-link-color: var(--color-dark);
  --mega-menu-tablet-link-weight: var(--font-weight-regular);
  --mega-menu-tablet-submenu-close-hidden: 1;
  --mega-menu-tablet-drawer-head-height: 32px;
  --mega-menu-tablet-close-offset-y: 0px;
  --mega-menu-tablet-drawer-padding-inline: 8px;
  --mega-menu-tablet-nav-item-height: 40px;
  --mega-menu-tablet-nav-item-padding-inline: 0;
  --mega-menu-tablet-nav-item-size: 17px;
  --mega-menu-tablet-nav-item-gap: 0px;
  --mega-menu-tablet-nav-chevron-gap: 6px;
  --mega-menu-tablet-nav-chevron-size: 16px;
  --mega-menu-tablet-nav-chevron-box-size: 20px;
  --mega-menu-tablet-nav-chevron-end-inset: 0px;
  --mega-menu-tablet-content-padding-top: 4px;
  --mega-menu-tablet-content-padding-inline: 8px;
  --mega-menu-tablet-content-padding-bottom: 12px;
  --mega-menu-tablet-panel-padding-top: 0px;
  --mega-menu-tablet-panel-padding-inline: 16px;
  --mega-menu-tablet-panel-padding-bottom: 16px;
  --mega-menu-tablet-back-size: 32px;
  --mega-menu-tablet-back-icon-size: 16px;
  --mega-menu-tablet-title-margin-top: 8px;
  --mega-menu-tablet-title-margin-bottom: 20px;
  --mega-menu-tablet-title-size: 20px;
  --mega-menu-tablet-group-margin-top: 14px;
  --mega-menu-tablet-group-margin-bottom: 8px;
  --mega-menu-tablet-group-size: 13px;
  --mega-menu-tablet-link-height: 42px;
  --mega-menu-tablet-link-size: 15px;
  --mega-menu-tablet-link-padding-inline: 0;
  --mega-menu-mobile-drawer-width-tablet: min(360px, 55vw);
  /* Mobile drawer keeps a deliberate right-side reveal so the backdrop blur remains visible, matching the supplied Canva reference. */
  --mega-menu-mobile-drawer-width-mobile: clamp(300px, 78vw, 380px);
  --mega-menu-mobile-drawer-max-width: 460px;
  --mega-menu-mobile-drawer-surface: var(--surface-raised);
  --mega-menu-mobile-drawer-shadow: var(--shadow-overlay);
  --mega-menu-mobile-drawer-transition-duration: var(--motion-medium);
  --mega-menu-mobile-drawer-transition-ease: var(--ease-standard);
  --mega-menu-mobile-drawer-head-height: var(--space-64);
  --mega-menu-mobile-drawer-head-height-mobile: var(--space-48);
  --mega-menu-mobile-drawer-head-padding-inline: var(--space-16);
  --mega-menu-mobile-close-size: var(--space-40);
  --mega-menu-mobile-close-icon-size: var(--icon-size-md);
  --mega-menu-mobile-content-padding-top: var(--space-8);
  --mega-menu-mobile-content-padding-inline: var(--space-24);
  --mega-menu-mobile-content-padding-inline-mobile: var(--space-16);
  --mega-menu-mobile-content-padding-bottom: var(--space-24);
  --mega-menu-mobile-nav-item-height: 52px;
  --mega-menu-mobile-nav-item-height-mobile: 48px;
  --mega-menu-mobile-nav-item-padding-inline: 12px;
  --mega-menu-mobile-nav-item-radius: var(--radius-sm);
  --mega-menu-mobile-nav-item-size: 18px;
  --mega-menu-mobile-nav-item-size-mobile: 17px;
  --mega-menu-mobile-nav-item-weight: var(--font-weight-medium);
  --mega-menu-mobile-nav-item-line: var(--line-body);
  --mega-menu-mobile-nav-item-hover-surface: var(--surface-hover);
  --mega-menu-mobile-nav-chevron-gap: var(--space-12);
  --mega-menu-mobile-nav-chevron-size: 14px;
  --mega-menu-mobile-nav-chevron-box-size: 24px;
  --mega-menu-mobile-nav-chevron-end-inset: 8px;
  --mega-menu-mobile-auth-gap: 6px;
  --mega-menu-mobile-auth-padding: var(--space-16);
  --mega-menu-mobile-auth-border-width: var(--border-width-subtle);
  --mega-menu-mobile-auth-border: var(--border-default);
  --mega-menu-mobile-login-bg: var(--button-color-primary-bg);
  --mega-menu-mobile-login-text: var(--button-color-primary-text);
  --mega-menu-mobile-login-border: var(--button-border-primary);
  --mega-menu-mobile-login-shadow: var(--button-shadow-default);
  --mega-menu-mobile-signup-bg: var(--button-color-outline-bg);
  --mega-menu-mobile-signup-text: var(--button-color-outline-text);
  --mega-menu-mobile-signup-border: var(--button-border-outline);
  --mega-menu-mobile-signup-shadow: var(--button-shadow-outline);
  --mega-menu-mobile-panel-padding-top: var(--space-8);
  --mega-menu-mobile-panel-padding-inline: var(--space-16);
  --mega-menu-mobile-panel-padding-inline-mobile: var(--space-16);
  --mega-menu-mobile-panel-padding-bottom: var(--space-24);
  --mega-menu-mobile-surface: var(--surface-raised);
  --mega-menu-mobile-back-size: 44px;
  --mega-menu-mobile-back-icon-size: var(--icon-size-md);
  --mega-menu-mobile-title-margin-top: var(--space-8);
  --mega-menu-mobile-title-margin-bottom: var(--space-24);
  --mega-menu-mobile-title-size: 28px;
  --mega-menu-mobile-title-size-mobile: 24px;
  --mega-menu-mobile-title-weight: var(--font-weight-medium);
  --mega-menu-mobile-title-line: var(--line-h4);
  --mega-menu-mobile-group-margin-top: var(--space-16);
  --mega-menu-mobile-group-margin-bottom: var(--space-8);
  --mega-menu-mobile-group-size: var(--font-label);
  --mega-menu-mobile-group-weight: var(--font-weight-medium);
  --mega-menu-mobile-group-tracking: .04em;
  --mega-menu-mobile-group-line: var(--line-caption);
  --mega-menu-mobile-link-padding-block: var(--space-12);
  --mega-menu-mobile-link-size: 17px;
  --mega-menu-mobile-link-size-mobile: 16px;
  --mega-menu-mobile-link-weight: var(--font-weight-medium);
  --mega-menu-mobile-link-line: var(--line-body);
  --mega-menu-mobile-backdrop-z-index: 1100;
  --mega-menu-mobile-backdrop-surface: rgba(19,27,36,.18);
  --mega-menu-mobile-backdrop-blur: 12px;
  --mega-menu-mobile-backdrop-saturate: 110%;
  --mega-menu-mobile-backdrop-transition-duration: var(--motion-medium);
  --mega-menu-mobile-backdrop-transition-ease: var(--ease-standard);
  --color-active-surface: rgba(191, 156, 98, 0.17);
  --color-focus-ring: rgba(191, 156, 98, 0.34);
  --color-selection: rgba(191, 156, 98, 0.22);
  --color-disabled-text: var(--text-muted);
  --color-disabled-background: var(--surface-raised);
  --color-disabled-border: var(--border-color);

  /* Brand surfaces */
  --color-surface-blue: #19150E;
  --color-surface-cyan: #151D17;
  --color-surface-violet: #1C160D;

  /* Brand gradients */
  --gradient-primary: linear-gradient(180deg, #D6B77C 0%, #BF9C62 42%, #987541 78%, #6B4D25 100%);
  --gradient-cyan: linear-gradient(135deg, #18372B 0%, #607B6D 100%);
  --gradient-purple: linear-gradient(135deg, #987541 0%, #BF9C62 100%);
  --gradient-accent: linear-gradient(135deg, #18372B 0%, #BF9C62 100%);
  --gradient-soft: linear-gradient(135deg, #111110 0%, #242018 100%);

  /* Logo Design Hero — page-level semantic visual tokens. */
  --gradient-logo-design-hero: linear-gradient(118deg, #6B4D25 0%, #987541 38%, #BF9C62 60%, #E7D4AD 100%);
  --gradient-logo-design-hero-wash: linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.96) 100%);
  --logo-design-hero-title-size: 68px;
  --logo-design-hero-title-size-mobile: 46px;
  --logo-design-hero-title-weight: var(--font-section-heading-weight);
  --logo-design-hero-title-line: 1.05;
  --logo-design-hero-title-line-mobile: 1.08;
  --tracking-hero-display: -.04em;
  --logo-design-hero-copy-size: 18px;
  --logo-design-hero-copy-size-mobile: 16px;
  --logo-design-hero-copy-line: 1.55;
  --logo-design-hero-copy-line-mobile: 1.55;

  /* Backward-compatible aliases used by existing components */
  --brand-blue: var(--color-primary);
  --brand-blue-dark: var(--color-primary-hover);
  --dark: var(--color-dark);
  --text: var(--color-secondary-text);
  --muted: var(--color-secondary-text);
  --white: var(--color-white);
  --surface: var(--color-background);
  --border: var(--color-border);

  /*
   * VIP BUSINESS GOLF NETWORK TYPOGRAPHY SYSTEM — LOCKED FOUNDATION
   *
   * Logo-inspired type direction: Tinos for editorial serif headings + Source Sans Pro for UI/body
   * Display headings mirror the logo’s elegant italic serif character; body text stays highly legible.
   * --font-secondary remains as a compatibility alias for existing components.
   *
   * Marketing/display type uses a restrained editorial weight and generous line-height:
   * existing size + shared Semibold (600) heading weight + controlled tracking.
   */
  /* Use the locally bundled, open-licensed Tinos and Source Sans Pro font families with robust system fallbacks. */
  --font-primary: "Source Sans Pro", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Tinos", Georgia, "Times New Roman", serif;
  --font-brand: "Tinos", Georgia, "Times New Roman", serif;
  --font-secondary: var(--font-primary);
  /* Dedicated semantic families: logo-inspired serif for headings/wordmark,
     Source Sans Pro-first sans-serif for body, UI, buttons and form controls. */
  --font-button-family: var(--font-primary);
  --font-form-family: var(--font-primary);
  --font-brand-style: italic;

  /* Supported global weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* Shared visual weight for primary section and CTA headings. */
  --font-section-heading-weight: var(--font-weight-regular);

  /* Display scale — desktop */
  --font-display-xl: 80px;
  --font-display-lg: 64px;
  --font-display-md: 52px;

  /* Section / heading scale — desktop */
  --font-section-xl: 46px;
  --font-section-lg: 38px;
  --font-section-md: 30px;
  --font-h4: 24px;
  --font-h5: 20px;
  --font-h6: 18px;

  /* Body scale — desktop */
  --font-body-xl: 20px;
  --font-large-body: 18px;
  --font-body: 16px;
  --font-small-body: 14px;
  --font-caption: 12px;

  /* UI scale — desktop */
  --font-nav: 15px;
  --font-button: 16px;
  --font-button-xs: 12px;
  --font-button-small: 14px;
  --font-label: 12px;
  --font-overline: 12px;

  /* Backward-compatible heading aliases */
  --font-h1: var(--font-section-xl);
  --font-h2: var(--font-section-lg);
  --font-h3: var(--font-section-md);

  /* Line heights */
  --line-display-xl: 1.04;
  --line-display-lg: 1.08;
  --line-display-md: 1.10;
  --line-section-xl: 1.12;
  --line-section-lg: 1.12;
  --line-section-md: 1.18;
  --line-h4: 1.40;
  --line-h5: 1.40;
  --line-h6: 1.45;
  --line-body-xl: 1.60;
  --line-body-large: 1.60;
  --line-body: 1.60;
  --line-small: 1.55;
  --line-caption: 1.50;
  --line-button: 1.375;
  --line-nav: 1.375;

  /* Backward-compatible line-height aliases */
  --line-h1: var(--line-section-xl);
  --line-h2: var(--line-section-lg);
  --line-h3: var(--line-section-md);

  /* Letter spacing */
  --tracking-display: -0.025em;
  --tracking-normal: 0;
  --tracking-overline: 1px;

  /*
   * VIP BUSINESS GOLF NETWORK SPACING & LAYOUT SYSTEM — v1.0 FOUNDATION
   *
   * Base principle: 8px grid with a small 4px micro-step.
   * Global spacing tokens are intentionally limited to the approved scale.
   */
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* Backward-compatible spacing aliases used by older components. */
  --space-1: var(--space-4);
  --space-2: var(--space-8);
  --space-3: var(--space-12);
  --space-4-legacy: var(--space-16);
  --space-5: var(--space-24);
  --space-6: var(--space-32);
  --space-7: var(--space-48);
  --space-8: var(--space-64);
  --space-9: var(--space-96);

  /* Container system. */
  --container-xl: 1920px;
  --container-lg: 1440px;
  --container-md: 1440px;
  --container-sm: 960px;
  --container-content: 720px;

  /* Backward-compatible container aliases. */
  --container-max-width: var(--container-md);
  --container-wide-max-width: var(--container-lg);

  /* Responsive page gutters. */
  --gutter-desktop: 48px;
  --gutter-tablet: 32px;
  --gutter-mobile: 20px;
  --container-padding-inline: var(--gutter-desktop);
  --container-padding-tablet: var(--gutter-tablet);
  --container-padding-mobile: var(--gutter-mobile);

  /* Section spacing system. */
  --section-space-hero: var(--space-96);
  --section-space-large: var(--space-80);
  --section-space-normal: var(--space-64);
  --section-space-small: var(--space-40);
  --component-group-space: var(--space-32);
  --element-space: var(--space-20);
  --internal-content-space: var(--space-16);


  /*
   * VIP BUSINESS GOLF NETWORK ICON SYSTEM — v1.0 FOUNDATION
   *
   * Artwork lives in /media/icons_library/.
   * Global rules below define size, color, spacing, alignment and states.
   */
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;
  --icon-size-2xl: 40px;
  --icon-size-3xl: 48px;

  /* Compact inline icon/text spacing. */
  --icon-gap: 8px;
  --icon-gap-lg: 12px;


  /* Recommended icon stroke guidance (assets may be filled or stroked). */
  --icon-stroke-xs: 1.5px;
  --icon-stroke-sm: 1.5px;
  --icon-stroke-md: 1.5px;
  --icon-stroke-lg: 2px;
  --icon-stroke-xl: 2px;
  --icon-stroke-2xl: 2px;
  --icon-stroke-3xl: 2.5px;

  --icon-color-default: var(--color-dark);
  --icon-color-primary: var(--color-primary);
  --icon-color-secondary: var(--color-secondary-text);
  --icon-color-muted: var(--color-neutral-400);
  --icon-color-disabled: var(--color-neutral-300);
  --icon-color-inverse: var(--color-white);
  --icon-color-success: var(--color-success);
  --icon-color-warning: var(--color-warning);
  --icon-color-error: var(--color-error);
  --icon-color-info: var(--color-info);

  --icon-container-radius: var(--radius-md);
  --icon-container-feature-radius: var(--radius-lg);
  --icon-container-circle-radius: var(--radius-circle);

  /* Responsive section spacing. */
  --section-space-hero-tablet: 72px;
  --section-space-large-tablet: 56px;
  --section-space-normal-tablet: 40px;
  --section-space-small-tablet: 28px;
  --component-group-space-tablet: var(--space-20);
  --element-space-tablet: var(--space-16);
  --internal-content-space-tablet: var(--space-12);

  --section-space-hero-mobile: 56px;
  --section-space-large-mobile: 40px;
  --section-space-normal-mobile: 32px;
  --section-space-small-mobile: var(--space-24);
  --component-group-space-mobile: var(--space-16);
  --element-space-mobile: var(--space-12);
  --internal-content-space-mobile: var(--space-8);

  /* Default section aliases retained for existing global classes. */
  --section-space-y: var(--section-space-normal);
  --section-space-y-tablet: var(--section-space-normal-tablet);
  --section-space-y-mobile: var(--section-space-normal-mobile);

  /* Global grid system. */
  --grid-columns-desktop: 12;
  --grid-columns-tablet: 8;
  --grid-columns-mobile: 4;
  --grid-column-gap: var(--space-32);
  --grid-row-gap: var(--space-32);
  --grid-column-gap-mobile: var(--space-20);
  --grid-row-gap-mobile: var(--space-20);

  /* Breakpoint reference values (for JS/documentation and component contracts). */
  --breakpoint-mobile: 767px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;

  /* Standard card/component padding. */
  --card-padding-small: var(--space-16);
  --card-padding-default: var(--space-24);
  --card-padding-large: var(--space-32);

  --button-padding-block: var(--space-16);
  --button-padding-inline: var(--space-24);
  --button-padding-block-mobile: var(--space-12);
  --button-padding-inline-mobile: var(--space-16);

  --content-measure: var(--container-content);
  --focus-ring: var(--shadow-focus);

  /*
   * VIP BUSINESS GOLF NETWORK BORDER RADIUS & SHAPE SYSTEM — v1.0 FOUNDATION
   *
   * Soft, rounded design language informed by the inspected reference style.
   * Use semantic component tokens instead of arbitrary one-off radii.
   */
  --radius-0: 0px;
  --radius-sharp: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* Semantic component radii. */
  --radius-button-small: var(--radius-pill);
  --radius-button-medium: var(--radius-pill);
  --radius-button-default: var(--radius-pill);
  --radius-button-large: var(--radius-pill);
  --radius-button-xl: var(--radius-pill);
  --radius-input: var(--radius-sm);
  --radius-dropdown: var(--radius-md);
  --radius-card-small: var(--radius-md);
  --radius-card-default: var(--radius-lg);
  --radius-card-feature: var(--radius-xl);
  --radius-card-large: var(--radius-2xl);
  --radius-hero: var(--radius-2xl);
  --radius-modal: var(--radius-2xl);
  --radius-popover: var(--radius-md);
  --radius-badge: var(--radius-pill);
  --radius-search: var(--radius-pill);
  --radius-icon-button: var(--radius-circle);
  --radius-avatar: var(--radius-circle);

  /* Responsive semantic overrides. */
  --radius-button-large-mobile: var(--radius-lg);
  --radius-button-xl-tablet: var(--radius-2xl);
  --radius-button-xl-mobile: var(--radius-xl);
  --radius-card-feature-mobile: var(--radius-lg);
  --radius-card-large-mobile: var(--radius-xl);
  --radius-hero-mobile: var(--radius-xl);
  --radius-modal-mobile: var(--radius-xl);

  /*
   * VIP BUSINESS GOLF NETWORK BORDER SYSTEM — v1.0 FOUNDATION
   *
   * Semantic, minimal and state-based borders.
   * Use these tokens instead of arbitrary border values.
   *
   * 0px    = none
   * 0.5px  = hairline
   * 1px    = subtle/default
   * 2px    = strong/focus/selected
   * 3px    = special cases only
   */
  --border-width-none: 0px;
  --border-width-hairline: 0.5px;
  --border-width-subtle: 1px;
  --border-width-strong: 2px;
  --border-width-extra-strong: 3px;

  /* Semantic border colors. */
  --border-default: var(--border-color);
  --border-subtle: var(--border-color-subtle);
  --border-hover: var(--border-color-hover);
  --border-focus: var(--color-primary);
  --border-selected: var(--color-primary);
  --border-disabled: var(--color-disabled-border);
  --border-success: var(--color-success);
  --border-warning: var(--color-warning);
  --border-error: var(--color-error);
  --border-info: var(--color-info);
  --border-inverse: var(--color-white);

  /* Semantic control widths. */
  --border-width-control: var(--border-width-subtle);
  --border-width-focus: var(--border-width-strong);
  --border-width-selected: var(--border-width-strong);
  --border-width-state: var(--border-width-strong);

  /* Dark-theme border colors are opt-in through a dark surface/theme class. */
  --border-default-dark: rgba(255, 255, 255, 0.12);
  --border-hover-dark: rgba(255, 255, 255, 0.20);
  --border-focus-dark: var(--color-primary);
  --border-selected-dark: var(--color-primary);
  --border-disabled-dark: rgba(255, 255, 255, 0.08);
  --border-success-dark: var(--color-success);
  --border-warning-dark: var(--color-warning);
  --border-error-dark: var(--color-error);
  --border-inverse-dark: var(--color-dark);

  /* Backward-compatible border alias. */
  --border: var(--border-default);

  /*
   * VIP BUSINESS GOLF NETWORK SHADOWS & ELEVATION SYSTEM — v1.0 FOUNDATION
   *
   * Semantic elevation levels inspired by the inspected Canva behavior.
   * Use tokens by role rather than arbitrary box-shadow values.
   *
   * 0 = Flat
   * 1 = Raised
   * 2 = Floating
   * 3 = Overlay
   */
  --shadow-none: none;

  /* Light theme semantic shadows. */
  --shadow-raised:
    0 1px 2px rgba(16, 24, 40, 0.06),
    0 4px 12px rgba(16, 24, 40, 0.08);

  --shadow-floating:
    0 4px 12px rgba(16, 24, 40, 0.08),
    0 12px 32px rgba(16, 24, 40, 0.12);

  --shadow-overlay:
    0 8px 24px rgba(16, 24, 40, 0.10),
    0 24px 64px rgba(16, 24, 40, 0.16);

  --shadow-inner:
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  --shadow-focus:
    0 0 0 3px var(--focus-ring-color);

  /* Interaction variants. */
  --shadow-raised-hover:
    0 2px 6px rgba(16, 24, 40, 0.08),
    0 8px 18px rgba(16, 24, 40, 0.10);

  --shadow-raised-active:
    0 1px 3px rgba(16, 24, 40, 0.10);

  /* Dark-theme recipes are opt-in through a dark surface/theme class. */
  --shadow-raised-dark:
    0 1px 2px rgba(0, 0, 0, 0.20),
    0 4px 12px rgba(0, 0, 0, 0.24);

  --shadow-floating-dark:
    0 4px 12px rgba(0, 0, 0, 0.24),
    0 12px 32px rgba(0, 0, 0, 0.30);

  --shadow-overlay-dark:
    0 8px 24px rgba(0, 0, 0, 0.30),
    0 24px 64px rgba(0, 0, 0, 0.40);

  --shadow-inner-dark:
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --shadow-focus-dark:
    0 0 0 3px rgba(191, 156, 98, 0.34);

  /* Backward-compatible shadow aliases used by existing UI primitives. */
  --shadow-sm: var(--shadow-raised);
  --shadow-md: var(--shadow-floating);
  --shadow-lg: var(--shadow-overlay);

  /*
   * VIP BUSINESS GOLF NETWORK MOTION & ANIMATION SYSTEM — v1.0 FOUNDATION
   *
   * Purposeful, subtle motion for interaction feedback and state changes.
   * Durations/easing are centralized design tokens for consistent premium interactions
   * behavior; they are not claimed as Canva's unpublished internal values.
   */
  --motion-instant: 0ms;
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-medium: 240ms;
  --motion-slow: 320ms;
  --motion-extended: 400ms;

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-linear: linear;

  --transition-hover: var(--motion-normal) var(--ease-standard);
  --transition-fade: var(--motion-normal) var(--ease-standard);
  --transition-enter: var(--motion-medium) var(--ease-enter);
  --transition-exit: var(--motion-normal) var(--ease-exit);

  /* Semantic interaction recipes. */
  --motion-hover-lift: translateY(-1px);
  --motion-card-lift: translateY(-2px);
  --motion-press: translateY(0);
  --motion-enter-offset: 8px;
  --motion-enter-scale: 0.98;
  --motion-stagger-step: 40ms;
  --motion-stagger-max: 200ms;

  /* Continuous loading motion. */
  --motion-spin-duration: 1000ms;
  --motion-shimmer-duration: 1200ms;

  /* Accessibility preference hook. */
  --motion-reduced-duration: 0.01ms;

  /*
   * VIP BUSINESS GOLF NETWORK INPUT & FORM COMPONENT SYSTEM — v1.0 FOUNDATION
   *
   * Compact, accessible and responsive form controls. Components consume
   * these tokens instead of hard-coded visual values.
   */
  --form-control-height-sm: 36px;
  --form-control-height: 40px;
  --form-control-height-lg: 48px;
  --form-control-height-mobile: 40px;
  --form-control-padding-x: 12px;
  --form-control-padding-y: 12px;
  --form-control-font-size: 14px;
  --form-control-font-weight: var(--font-weight-regular);
  --form-control-line: 1.4;
  --form-control-background: var(--surface-input);
  --form-control-disabled-background: var(--color-disabled-background);

  --form-input-radius: var(--radius-sm);
  --form-search-radius: var(--radius-pill);
  --form-dropdown-radius: var(--radius-popover);
  --form-card-radius: var(--radius-card-default);

  --form-border-width: var(--border-width-subtle);
  --form-border-focus-width: var(--border-width-strong);
  --form-border-state-width: var(--border-width-strong);
  --form-border-default: var(--border-default);
  --form-border-hover: var(--border-hover);
  --form-border-focus: var(--border-focus);
  --form-border-disabled: var(--border-disabled);
  --form-border-success: var(--border-success);
  --form-border-error: var(--border-error);

  --form-label-size: var(--font-label);
  --form-label-weight: var(--font-weight-medium);
  --form-label-line: 18px;
  --form-help-size: 12px;
  --form-help-line: 18px;
  --form-choice-size: 14px;
  --form-option-size: 14px;
  --form-chip-size: 12px;

  --form-field-gap: var(--space-4);
  --form-helper-gap: var(--space-4);
  --form-field-group-gap: var(--space-12);
  --form-section-gap: var(--space-24);
  --form-input-icon-size: var(--icon-size-md);
  --form-select-icon-size: var(--icon-size-sm);
  --form-check-size: 16px;
  --form-number-control: 40px;

  --form-textarea-height: 96px;
  --form-textarea-line: 22px;
  --form-option-height: 40px;
  --form-file-height: 152px;
  --form-file-height-mobile: 132px;
  --form-file-border-width: var(--border-width-subtle);
  --form-file-border: var(--border-hover);

  --form-switch-width: 44px;
  --form-switch-height: 24px;
  --form-switch-thumb: 18px;
  --form-switch-padding: 3px;
  --form-transition: var(--transition-hover);

  /*
   * VIP BUSINESS GOLF NETWORK BUTTON COMPONENT SYSTEM — v2.0 FOUNDATION
   *
   * All button appearance is token-driven.
   * Standard buttons are solid/no-gradient. The gradient variant is an
   * explicit marketing/hero CTA treatment only.
   * All buttons use a fixed 16px radius.
   */
  --button-font-weight: var(--font-weight-semibold);
  --button-radius: var(--radius-pill);
  --button-icon-gap: var(--icon-gap);
  --button-group-gap: var(--space-16);
  --button-transition: var(--transition-hover);
  --button-hover-lift: var(--motion-hover-lift);
  --button-press-transform: var(--motion-press);
  --button-disabled-opacity: 0.55;
  --button-border-default: var(--border-default);


  /*
   * VIP BUSINESS GOLF NETWORK CARD & SURFACE COMPONENT SYSTEM — v1.0
   *
   * Reusable card families consume the global foundation tokens below.
   * Cards should not introduce one-off radius, spacing, border or shadow values.
   */
  --card-radius-sm: var(--radius-card-small);
  --card-radius-md: var(--radius-card-default);
  --card-radius-lg: var(--radius-card-feature);
  --card-radius-xl: var(--radius-card-large);

  --card-padding-sm: var(--space-16);
  --card-padding-md: var(--space-24);
  --card-padding-lg: var(--space-32);

  --card-gap: var(--space-16);
  --card-section-gap: var(--space-24);
  --card-cta-gap: var(--space-24);
  --card-grid-gap: var(--space-24);
  --card-icon-gap: var(--space-8);

  --card-icon-sm: var(--icon-size-md);
  --card-icon-md: var(--icon-size-lg);
  --card-icon-lg: var(--icon-size-xl);
  --card-icon-xl: var(--icon-size-2xl);

  --card-surface-default: var(--surface-card);
  --card-surface-subtle: var(--surface-subtle);
  --card-surface-brand: var(--surface-subtle);
  --card-surface-cyan: var(--surface-subtle);
  --card-surface-violet: var(--surface-subtle);
  --card-surface-dark: var(--surface-raised);
  --card-surface-success: var(--color-success-soft);
  --card-surface-warning: var(--color-warning-soft);
  --card-surface-error: var(--color-error-soft);

  --card-border-default: var(--border-default);
  --card-border-hover: var(--border-hover);
  --card-border-focus: var(--border-focus);
  --card-border-selected: var(--border-selected);
  --card-border-disabled: var(--border-disabled);

  --card-shadow-default: var(--shadow-raised);
  --card-shadow-hover: var(--shadow-raised-hover);
  --card-shadow-active: var(--shadow-raised-active);
  --card-shadow-focus: var(--shadow-focus), var(--shadow-raised);
  --card-shadow-floating: var(--shadow-floating);

  --card-media-aspect: 16 / 9;
  --card-transition: var(--transition-hover);
  --card-hover-transform: var(--motion-card-lift);
  --card-disabled-opacity: 0.62;

  --button-height-xs: 32px;
  --button-height-sm: 36px;
  --button-height-md: 44px;
  --button-height-lg: 48px;
  --button-height-xl: 52px;
  --button-height-hero: 56px;

  --button-height-lg-mobile: 48px;
  --button-height-xl-mobile: 48px;
  --button-height-hero-mobile: 48px;

  --button-padding-xs: 12px;
  --button-padding-sm: 16px;
  --button-padding-md: 20px;
  --button-padding-lg: 24px;
  --button-padding-xl: 28px;
  --button-padding-hero: 32px;
  --button-padding-text: 0px;

  --button-padding-md-mobile: 18px;
  --button-padding-lg-mobile: 20px;
  --button-padding-xl-mobile: 22px;
  --button-padding-hero-mobile: 22px;

  --button-icon-size: var(--icon-size-md);
  --button-icon-only-size: var(--icon-size-md);
  --button-icon-button-size: var(--button-height-md);
  --button-icon-button-size-mobile: var(--button-height-md);
  --button-spinner-size: 16px;
  --button-spinner-border-width: 2px;
  --button-spinner-track: rgba(255, 255, 255, 0.35);

  --button-shadow-none: var(--shadow-none);
  --button-shadow-default: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 0 rgba(93,68,32,.82), 0 7px 16px rgba(0,0,0,.30);
  --button-shadow-hover: inset 0 1px 0 rgba(255,255,255,.34), 0 4px 0 rgba(93,68,32,.82), 0 11px 22px rgba(0,0,0,.34);
  --button-shadow-active: inset 0 2px 3px rgba(0,0,0,.18), 0 1px 0 rgba(93,68,32,.7);
  --button-shadow-outline: var(--shadow-inner), var(--shadow-raised);
  --button-shadow-focus: var(--shadow-focus), var(--shadow-raised);
  --button-shadow-gradient: var(--shadow-inner), var(--shadow-raised);
  --button-shadow-gradient-hover: var(--shadow-inner), var(--shadow-raised-hover);
  --button-shadow-gradient-active: var(--shadow-raised-active);

  /* Light surface CTA — translucent on brand surfaces, solid white on hover. */
  --button-color-light-bg: var(--color-white);
  --button-color-light-hover-bg: var(--color-white);
  --button-color-light-active-bg: var(--color-white);
  --button-color-light-text: var(--color-dark);
  --button-color-light-hover-text: var(--color-dark);
  --button-color-light-active-text: var(--color-dark);
  --button-border-light: rgba(255, 255, 255, 0.82);
  --button-border-light-hover: var(--color-white);
  --button-border-light-active: var(--color-white);

  /* Header-auth button variants — reusable Button Component states.
   * Both variants intentionally derive their surfaces from global navigation/white tokens. */
  --button-color-header-signup-bg: transparent;
  --button-color-header-signup-hover-bg: var(--navigation-hover-surface-on-dark);
  --button-color-header-signup-active-bg: var(--navigation-active-surface-on-dark);
  --button-color-header-signup-text: var(--color-white);
  --button-color-header-signup-hover-text: var(--color-white);
  --button-color-header-signup-active-text: var(--color-white);
  --button-border-header-signup: var(--navigation-hover-border-on-dark);
  --button-border-header-signup-hover: var(--navigation-hover-border-on-dark);
  --button-border-header-signup-active: var(--navigation-hover-border-on-dark);
  /* Legacy compatibility tokens retained for existing consumers.
     Locked Header state uses the standard outline treatment on the revealed white header. */
  --button-color-header-signup-light-bg: var(--navigation-hover-surface-on-light);
  --button-color-header-signup-light-hover-bg: var(--navigation-hover-surface-on-light);
  --button-color-header-signup-light-active-bg: var(--navigation-hover-surface-on-light);
  --button-color-header-signup-light-text: var(--color-primary);
  --button-color-header-signup-light-hover-text: var(--color-primary);
  --button-color-header-signup-light-active-text: var(--color-primary);
  --button-border-header-signup-light: var(--navigation-hover-border-on-light);
  --button-border-header-signup-light-hover: var(--navigation-hover-border-on-light);
  --button-border-header-signup-light-active: var(--navigation-hover-border-on-light);
  --button-header-signup-light-blur: var(--navigation-hover-blur);
  --button-color-header-login-bg: rgba(255,255,255,.88);
  --button-color-header-login-bg: color-mix(in srgb, var(--color-white) 88%, transparent);
  --button-color-header-login-hover-bg: var(--color-white);
  --button-color-header-login-active-bg: color-mix(in srgb, var(--color-white) 94%, transparent);
  --button-color-header-login-text: var(--color-dark);
  --button-color-header-login-hover-text: var(--color-dark);
  --button-color-header-login-active-text: var(--color-dark);
  --button-border-header-login: color-mix(in srgb, var(--color-white) 78%, transparent);
  --button-border-header-login-hover: var(--color-white);
  --button-border-header-login-active: var(--color-white);
  --button-header-auth-blur: var(--navigation-hover-blur);
  --button-header-auth-transition: var(--navigation-hover-indicator-transition);

  /* Primary — solid, no gradient. */
  --button-color-primary-bg: var(--brand-gold);
  --button-color-primary-hover-bg: var(--brand-gold-light);
  --button-color-primary-active-bg: var(--brand-gold-deep);
  --button-color-primary-text: var(--text-on-primary);
  --button-color-primary-hover-text: var(--text-on-primary);
  --button-color-primary-active-text: var(--text-on-primary);
  --button-border-primary: transparent;
  --button-border-primary-hover: transparent;
  --button-border-primary-active: transparent;

  /* Secondary — light surface, no gradient. */
  --button-color-secondary-bg: var(--surface-card);
  --button-color-secondary-hover-bg: var(--surface-elevated);
  --button-color-secondary-active-bg: var(--surface-active);
  --button-color-secondary-text: var(--text-primary);
  --button-color-secondary-hover-text: var(--text-primary);
  --button-color-secondary-active-text: var(--text-primary);
  --button-border-secondary: var(--border-default);
  --button-border-secondary-hover: var(--border-hover);
  --button-border-secondary-active: var(--border-hover);

  /* Outline — transparent/light surface, blue border. */
  --button-color-outline-bg: transparent;
  --button-color-outline-hover-bg: var(--surface-hover);
  --button-color-outline-active-bg: var(--surface-active);
  --button-color-outline-text: var(--color-primary);
  --button-color-outline-hover-text: var(--color-primary-hover);
  --button-color-outline-active-text: var(--color-primary-active);
  --button-border-outline: var(--color-primary);
  --button-border-outline-hover: var(--color-primary);
  --button-border-outline-active: var(--color-primary);

  /* Tertiary — low-emphasis filled surface. */
  --button-color-tertiary-bg: transparent;
  --button-color-tertiary-hover-bg: var(--surface-hover);
  --button-color-tertiary-active-bg: var(--surface-active);
  --button-color-tertiary-text: var(--color-primary);
  --button-color-tertiary-hover-text: var(--color-primary-hover);
  --button-color-tertiary-active-text: var(--color-primary-active);
  --button-border-tertiary: transparent;
  --button-border-tertiary-hover: transparent;
  --button-border-tertiary-active: transparent;

  /* Text — no surface. */
  --button-color-text-bg: transparent;
  --button-color-text-hover-bg: transparent;
  --button-color-text-active-bg: transparent;
  --button-color-text-text: var(--color-primary);
  --button-color-text-hover-text: var(--color-primary-hover);
  --button-color-text-active-text: var(--color-primary-active);
  --button-border-text: transparent;
  --button-border-text-hover: transparent;
  --button-border-text-active: transparent;

  /* Icon button — light raised surface. */
  --button-color-icon-bg: var(--surface-card);
  --button-color-icon-hover-bg: var(--surface-hover);
  --button-color-icon-active-bg: var(--surface-active);
  --button-color-icon-text: var(--text-primary);
  --button-color-icon-hover-text: var(--color-primary);
  --button-color-icon-active-text: var(--color-primary-active);
  --button-border-icon: var(--border-default);
  --button-border-icon-hover: var(--border-hover);
  --button-border-icon-active: var(--border-selected);

  /* Menu outline — transparent control surface. */
  --button-color-menu-bg: transparent;
  --button-color-menu-hover-bg: var(--surface-hover);
  --button-color-menu-active-bg: var(--surface-active);
  --button-color-menu-text: var(--text-primary);
  --button-color-menu-hover-text: var(--color-primary);
  --button-color-menu-active-text: var(--color-primary);
  --button-border-menu: var(--border-default);
  --button-border-menu-hover: var(--border-hover);
  --button-border-menu-active: var(--border-selected);

  /* Gradient — explicit hero/marketing CTA only. */
  --button-color-gradient-bg: var(--gradient-primary);
  --button-color-gradient-hover-bg: var(--gradient-purple);
  --button-color-gradient-active-bg: var(--color-primary-active);
  --button-color-gradient-text: var(--color-white);
  --button-color-gradient-hover-text: var(--color-white);
  --button-color-gradient-active-text: var(--color-white);
  --button-border-gradient: transparent;
  --button-border-gradient-hover: transparent;
  --button-border-gradient-active: transparent;

  /* Destructive — semantic error action. */
  --button-color-destructive-bg: var(--color-error);
  --button-color-destructive-hover-bg: var(--color-error-dark);
  --button-color-destructive-active-bg: var(--color-error-dark);
  --button-color-destructive-text: var(--color-white);
  --button-color-destructive-hover-text: var(--color-white);
  --button-color-destructive-active-text: var(--color-white);
  --button-border-destructive: transparent;
  --button-border-destructive-hover: transparent;
  --button-border-destructive-active: transparent;

  /* Contrast — light CTA on dark/brand surfaces. */
  --button-color-contrast-bg: #F5F1E9;
  --button-color-contrast-hover-bg: #FFFFFF;
  --button-color-contrast-active-bg: var(--color-neutral-100);
  --button-color-contrast-text: #080706;
  --button-color-contrast-hover-text: var(--color-dark);
  --button-color-contrast-active-text: var(--color-dark);
  --button-border-contrast: var(--color-white);
  --button-border-contrast-hover: var(--color-white);
  --button-border-contrast-active: var(--color-neutral-100);

  /* Contextual surface text — opt-in for colored/dark backgrounds */
  --surface-text-primary: var(--text-primary);
  --surface-text-secondary: var(--text-secondary);
  --surface-text-muted: var(--text-muted);
  --surface-link: var(--color-primary);
  --surface-on-primary: var(--text-on-primary);
}

@media (max-width: 1023px) {
  :root {
    /* Tablet */
    --font-display-xl: 64px;
    --font-display-lg: 56px;
    --font-display-md: 48px;

    --font-section-xl: 44px;
    --font-section-lg: 36px;
    --font-section-md: 28px;
    --font-h4: 22px;
    --font-h5: 20px;
    --font-h6: 18px;

    --font-body-xl: 18px;
    --font-large-body: 18px;
    --font-body: 16px;
    --font-small-body: 14px;
    --font-caption: 12px;

    --font-nav: 15px;
    --font-button: 16px;
    --font-button-xs: 12px;
    --font-button-small: 14px;
    --font-label: 12px;
    --font-overline: 12px;
  }
}

@media (max-width: 767px) {
  :root {
    /* Mobile */
    --font-display-xl: 48px;
    --font-display-lg: 40px;
    --font-display-md: 36px;

    --font-section-xl: 36px;
    --font-section-lg: 28px;
    --font-section-md: 24px;
    --font-h4: 20px;
    --font-h5: 18px;
    --font-h6: 16px;

    --font-body-xl: 18px;
    --font-large-body: 16px;
    --font-body: 16px;
    --font-small-body: 14px;
    --font-caption: 12px;

    --font-nav: 14px;
    --font-button: 15px;
    --font-button-xs: 12px;
    --font-button-small: 14px;
    --font-label: 12px;
    --font-overline: 12px;
  }
}


/* ========================================================================
   VIP BUSINESS GOLF NETWORK — GLOBAL THEME SYSTEM v1.0
   Default: Dark. Light is opt-in. System mode is resolved by theme-system.js.
   Existing token names are kept so reusable components remain compatible.
   ======================================================================== */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-gold: #BF9C62;
  --brand-gold-light: #D6B77C;
  --brand-gold-soft: #E7D4AD;
  --brand-gold-deep: #987541;
  --brand-black: #050505;
  --brand-charcoal: #111110;
  --brand-emerald: #18372B;

  --surface-canvas: #050505;
  --surface-raised: #0B0B0A;
  --surface-card: #111110;
  --surface-elevated: #181715;
  --surface-input: #0D0D0C;
  --surface-overlay: rgba(8, 8, 7, .97);
  --surface-hover: rgba(191, 156, 98, .10);
  --surface-active: rgba(191, 156, 98, .17);
  --surface-subtle: #15130F;
  --surface-inverse: #F5F1E9;

  --text-primary: #F5F1E9;
  --text-secondary: #C5BCAE;
  --text-muted: #978D7D;
  --text-on-primary: #080706;
  --border-color: #302A22;
  --border-color-subtle: rgba(191, 156, 98, .20);
  --border-color-hover: rgba(191, 156, 98, .48);
  --focus-ring-color: rgba(191, 156, 98, .38);

  --color-primary: var(--brand-gold);
  --color-primary-hover: var(--brand-gold-light);
  --color-primary-active: var(--brand-gold-deep);
  --color-dark: var(--text-primary);
  --color-background: var(--surface-canvas);
  --color-border: var(--border-color);
  --color-secondary-text: var(--text-secondary);
  --color-disabled-background: var(--surface-raised);
  --color-disabled-text: var(--text-muted);
  --color-disabled-border: var(--border-color);
  --color-hover-surface: var(--surface-hover);
  --color-active-surface: var(--surface-active);
  --color-surface-blue: var(--surface-subtle);
  --color-surface-cyan: #151D17;
  --color-surface-violet: #1C160D;
  --color-beige-50: #19150E;

  --border-default: var(--border-color);
  --border-subtle: var(--border-color-subtle);
  --border-hover: var(--border-color-hover);
  --border-focus: var(--brand-gold-light);
  --border-selected: var(--brand-gold);
  --border-default-dark: rgba(245, 241, 233, .14);
  --border-hover-dark: rgba(191, 156, 98, .44);
  --border-focus-dark: var(--brand-gold-light);
  --border-inverse-dark: #080807;

  --shadow-raised: 0 2px 4px rgba(0,0,0,.28), 0 8px 22px rgba(0,0,0,.24);
  --shadow-floating: 0 6px 14px rgba(0,0,0,.32), 0 18px 42px rgba(0,0,0,.30);
  --shadow-overlay: 0 12px 30px rgba(0,0,0,.42), 0 28px 68px rgba(0,0,0,.38);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-focus: 0 0 0 3px var(--focus-ring-color);
  --shadow-raised-hover: 0 4px 8px rgba(0,0,0,.32), 0 12px 28px rgba(0,0,0,.35);
  --shadow-raised-active: 0 1px 2px rgba(0,0,0,.36);
  --shadow-sm: var(--shadow-raised);
  --shadow-md: var(--shadow-floating);
  --shadow-lg: var(--shadow-overlay);
  --focus-ring: var(--shadow-focus);

  --form-control-background: var(--surface-input);
  --form-control-disabled-background: var(--surface-raised);
  --form-border-default: var(--border-color);
  --form-border-hover: var(--border-color-hover);
  --form-border-focus: var(--brand-gold-light);
  --form-border-disabled: var(--border-color);
  --form-file-border: var(--border-color-hover);

  --card-surface-default: var(--surface-card);
  --card-surface-subtle: var(--surface-subtle);
  --card-surface-brand: var(--surface-subtle);
  --card-surface-cyan: #151D17;
  --card-surface-violet: #1C160D;
  --card-surface-dark: var(--surface-raised);

  --mega-menu-surface: var(--surface-overlay);
  --mega-menu-surface-on-solid: var(--surface-elevated);
  --mega-menu-border: var(--border-color);
  --mega-menu-divider: var(--border-color);
  --mega-menu-heading-color: var(--text-muted);
  --mega-menu-item-color: var(--text-primary);
  --mega-menu-item-hover-color: var(--text-on-primary);
  --mega-menu-item-hover-surface: var(--brand-gold);
  --mega-menu-item-hover-shadow: 0 4px 14px rgba(0,0,0,.28);
  --mega-menu-promo-surface: #15120C;
  --mega-menu-mobile-drawer-surface: var(--surface-raised);
  --mega-menu-mobile-surface: var(--surface-raised);
  --mega-menu-mobile-nav-item-hover-surface: var(--surface-hover);
  --mega-menu-tablet-menu-hover-surface: var(--surface-hover);
  --mega-menu-tablet-menu-press-surface: var(--surface-active);

  --button-color-primary-bg: var(--brand-gold);
  --button-color-primary-hover-bg: var(--brand-gold-light);
  --button-color-primary-active-bg: var(--brand-gold-deep);
  --button-color-primary-text: var(--text-on-primary);
  --button-color-primary-hover-text: var(--text-on-primary);
  --button-color-primary-active-text: #FFFFFF;
  --button-color-secondary-bg: var(--surface-card);
  --button-color-secondary-hover-bg: var(--surface-elevated);
  --button-color-secondary-active-bg: var(--surface-active);
  --button-color-secondary-text: var(--text-primary);
  --button-color-secondary-hover-text: var(--text-primary);
  --button-color-secondary-active-text: var(--text-primary);
  --button-border-secondary: var(--border-color);
  --button-border-secondary-hover: var(--border-color-hover);
  --button-color-outline-hover-bg: var(--surface-hover);
  --button-color-outline-active-bg: var(--surface-active);
  --button-color-outline-text: var(--brand-gold-light);
  --button-color-outline-hover-text: #F1D8A8;
  --button-color-tertiary-hover-bg: var(--surface-hover);
  --button-color-tertiary-active-bg: var(--surface-active);
  --button-color-icon-bg: var(--surface-card);
  --button-color-icon-hover-bg: var(--surface-hover);
  --button-color-icon-active-bg: var(--surface-active);
  --button-color-icon-text: var(--text-primary);
  --button-color-menu-text: var(--text-primary);
  --button-color-menu-hover-bg: var(--surface-hover);
  --button-color-menu-active-bg: var(--surface-active);
  --button-color-contrast-bg: #F5F1E9;
  --button-color-contrast-hover-bg: #FFFFFF;
  --button-color-contrast-text: #080706;
  --button-shadow-default: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 0 rgba(93,68,32,.82), 0 7px 16px rgba(0,0,0,.30);
  --button-shadow-hover: inset 0 1px 0 rgba(255,255,255,.34), 0 4px 0 rgba(93,68,32,.82), 0 11px 22px rgba(0,0,0,.34);
  --button-shadow-active: inset 0 2px 3px rgba(0,0,0,.18), 0 1px 0 rgba(93,68,32,.7);
  --button-hover-lift: translateY(-2px);
  --button-press-transform: translateY(1px);

  --icon-color-default: var(--text-primary);
  --icon-color-primary: var(--brand-gold-light);
  --icon-color-secondary: var(--text-secondary);
  --icon-color-muted: var(--text-muted);
  --icon-color-disabled: #575147;
  --icon-color-inverse: #080706;
  --icon-color-info: #BFA875;

  --navigation-hover-surface-on-dark: rgba(191,156,98,.11);
  --navigation-hover-border-on-dark: rgba(191,156,98,.32);
  --navigation-hover-surface-on-light: rgba(143,109,55,.10);
  --navigation-hover-border-on-light: rgba(143,109,55,.25);
  --navigation-active-surface-on-dark: rgba(191,156,98,.16);
  --navigation-mega-surface: var(--surface-overlay);
  --navigation-mega-surface-on-solid: var(--surface-elevated);
  --navigation-mega-border: var(--border-color);
  --border-glass: var(--border-color);
  --navigation-mega-shadow: var(--shadow-overlay);

  --surface-text-primary: var(--text-primary);
  --surface-text-secondary: var(--text-secondary);
  --surface-text-muted: var(--text-muted);
  --surface-link: var(--brand-gold-light);
  --surface-on-primary: var(--text-on-primary);
  --brand-blue: var(--brand-gold);
  --brand-blue-dark: var(--brand-gold-deep);
  --dark: var(--text-primary);
  --text: var(--text-secondary);
  --muted: var(--text-muted);
  --surface: var(--surface-canvas);
  --border: var(--border-color);
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface-canvas: #F7F5F0;
  --surface-raised: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-elevated: #FFFEFC;
  --surface-input: #FFFFFF;
  --surface-overlay: rgba(255, 255, 255, .97);
  --surface-hover: rgba(143, 109, 55, .09);
  --surface-active: rgba(143, 109, 55, .15);
  --surface-subtle: #F0EBE1;
  --surface-inverse: #080706;

  --text-primary: #191611;
  --text-secondary: #5E574B;
  --text-muted: #7E7567;
  --text-on-primary: #080706;
  --border-color: #DED7CA;
  --border-color-subtle: rgba(61, 49, 29, .12);
  --border-color-hover: rgba(143, 109, 55, .48);
  --focus-ring-color: rgba(143, 109, 55, .28);

  --color-primary: #8F6D37;
  --color-primary-hover: #775727;
  --color-primary-active: #60451D;
  --color-dark: var(--text-primary);
  --color-background: var(--surface-canvas);
  --color-border: var(--border-color);
  --color-secondary-text: var(--text-secondary);
  --color-disabled-background: #F0ECE4;
  --color-disabled-text: #8A8174;
  --color-disabled-border: #DDD5C7;
  --color-hover-surface: var(--surface-hover);
  --color-active-surface: var(--surface-active);
  --color-surface-blue: #F4EFE5;
  --color-surface-cyan: #EDF1EA;
  --color-surface-violet: #F1ECE3;
  --color-beige-50: #F7F1E7;

  --color-blue-900: #5F461F;
  --color-blue-800: #795A2A;
  --color-blue-700: #8F6D37;
  --color-blue-600: #A27C43;
  --color-blue-500: #BF9C62;
  --color-blue-400: #D0B47F;
  --color-blue-300: #DFC99F;
  --color-blue-200: #E9D9B8;
  --color-blue-100: #F1E7D3;
  --color-blue-50: #F7F2E8;
  --color-cyan-600: #496B57;
  --color-cyan-500: #6E8E75;
  --color-cyan-200: #C7D9C8;
  --color-cyan-50: #EDF3ED;
  --color-indigo-600: #66543A;
  --color-indigo-400: #A99A80;
  --color-indigo-200: #DED4C4;
  --color-indigo-50: #F1ECE3;
  --color-violet-600: #735530;
  --color-violet-400: #B79A6C;
  --color-violet-200: #E3D1B0;
  --color-violet-50: #F5EFE3;

  --color-neutral-950: #080706;
  --color-neutral-900: #171512;
  --color-neutral-800: #29251F;
  --color-neutral-700: #494238;
  --color-neutral-600: #665E51;
  --color-neutral-500: #83796A;
  --color-neutral-400: #A59B8C;
  --color-neutral-300: #C8C0B3;
  --color-neutral-200: #DED7CA;
  --color-neutral-100: #F0ECE4;
  --color-neutral-50: #FAF8F3;

  --border-default: var(--border-color);
  --border-subtle: var(--border-color-subtle);
  --border-hover: var(--border-color-hover);
  --border-focus: var(--color-primary);
  --border-selected: var(--color-primary);
  --border-default-dark: rgba(25,22,17,.16);
  --border-hover-dark: rgba(143,109,55,.32);
  --border-focus-dark: var(--color-primary);
  --border-inverse-dark: #FFFFFF;

  --shadow-raised: 0 1px 2px rgba(35, 27, 16, .05), 0 5px 16px rgba(35, 27, 16, .07);
  --shadow-floating: 0 5px 14px rgba(35, 27, 16, .08), 0 14px 34px rgba(35, 27, 16, .10);
  --shadow-overlay: 0 12px 30px rgba(35, 27, 16, .10), 0 26px 60px rgba(35, 27, 16, .13);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,.75);
  --shadow-focus: 0 0 0 3px var(--focus-ring-color);
  --shadow-raised-hover: 0 3px 8px rgba(35,27,16,.08), 0 10px 24px rgba(35,27,16,.11);
  --shadow-raised-active: 0 1px 2px rgba(35,27,16,.12);
  --shadow-sm: var(--shadow-raised);
  --shadow-md: var(--shadow-floating);
  --shadow-lg: var(--shadow-overlay);
  --focus-ring: var(--shadow-focus);

  --form-control-background: var(--surface-input);
  --form-control-disabled-background: var(--color-disabled-background);
  --form-border-default: var(--border-color);
  --form-border-hover: var(--border-color-hover);
  --form-border-focus: var(--color-primary);
  --form-border-disabled: var(--border-color);
  --form-file-border: var(--border-color-hover);

  --card-surface-default: var(--surface-card);
  --card-surface-subtle: var(--surface-subtle);
  --card-surface-brand: var(--surface-subtle);
  --card-surface-cyan: #EDF3ED;
  --card-surface-violet: #F5EFE3;
  --card-surface-dark: #EFEAE0;

  --mega-menu-surface: var(--surface-overlay);
  --mega-menu-surface-on-solid: var(--surface-elevated);
  --mega-menu-border: var(--border-color);
  --mega-menu-divider: var(--border-color);
  --mega-menu-heading-color: var(--text-muted);
  --mega-menu-item-color: var(--text-primary);
  --mega-menu-item-hover-color: #080706;
  --mega-menu-item-hover-surface: #E1C38A;
  --mega-menu-item-hover-shadow: 0 4px 12px rgba(35,27,16,.12);
  --mega-menu-promo-surface: #F1E8D6;
  --mega-menu-mobile-drawer-surface: var(--surface-raised);
  --mega-menu-mobile-surface: var(--surface-raised);
  --mega-menu-mobile-nav-item-hover-surface: var(--surface-hover);

  --button-color-primary-bg: var(--brand-gold);
  --button-color-primary-hover-bg: var(--brand-gold-light);
  --button-color-primary-active-bg: var(--brand-gold-deep);
  --button-color-primary-text: var(--text-on-primary);
  --button-color-primary-hover-text: var(--text-on-primary);
  --button-color-primary-active-text: #FFFFFF;
  --button-color-secondary-bg: var(--surface-card);
  --button-color-secondary-hover-bg: var(--surface-elevated);
  --button-color-secondary-active-bg: var(--surface-active);
  --button-color-secondary-text: var(--text-primary);
  --button-color-secondary-hover-text: var(--text-primary);
  --button-color-secondary-active-text: var(--text-primary);
  --button-border-secondary: var(--border-color);
  --button-border-secondary-hover: var(--border-color-hover);
  --button-color-outline-hover-bg: var(--surface-hover);
  --button-color-outline-active-bg: var(--surface-active);
  --button-color-outline-text: var(--color-primary);
  --button-color-outline-hover-text: #684C25;
  --button-color-tertiary-hover-bg: var(--surface-hover);
  --button-color-tertiary-active-bg: var(--surface-active);
  --button-color-icon-bg: var(--surface-card);
  --button-color-icon-hover-bg: var(--surface-hover);
  --button-color-icon-active-bg: var(--surface-active);
  --button-color-icon-text: var(--text-primary);
  --button-color-menu-text: var(--text-primary);
  --button-color-menu-hover-bg: var(--surface-hover);
  --button-color-menu-active-bg: var(--surface-active);
  --button-color-contrast-bg: #080706;
  --button-color-contrast-hover-bg: #171512;
  --button-color-contrast-text: #F5F1E9;
  --button-border-contrast: #080706;
  --button-border-contrast-hover: #080706;
  --button-border-contrast-active: #171512;
  --button-shadow-default: 0 2px 0 rgba(113,83,35,.6), 0 5px 14px rgba(35,27,16,.14);
  --button-shadow-hover: 0 3px 0 rgba(113,83,35,.65), 0 9px 20px rgba(35,27,16,.16);
  --button-shadow-active: inset 0 2px 3px rgba(0,0,0,.12), 0 1px 0 rgba(113,83,35,.5);
  --button-hover-lift: translateY(-2px);
  --button-press-transform: translateY(1px);

  --icon-color-default: var(--text-primary);
  --icon-color-primary: var(--color-primary);
  --icon-color-secondary: var(--text-secondary);
  --icon-color-muted: var(--text-muted);
  --icon-color-disabled: #C4BDB1;
  --icon-color-inverse: #FFFFFF;
  --icon-color-info: #9B783E;

  --navigation-hover-surface-on-dark: rgba(191,156,98,.10);
  --navigation-hover-border-on-dark: rgba(143,109,55,.28);
  --navigation-hover-surface-on-light: rgba(143,109,55,.10);
  --navigation-hover-border-on-light: rgba(143,109,55,.25);
  --navigation-active-surface-on-dark: rgba(191,156,98,.16);
  --navigation-mega-surface: var(--surface-overlay);
  --navigation-mega-surface-on-solid: var(--surface-elevated);
  --navigation-mega-border: var(--border-color);
  --border-glass: var(--border-color);
  --navigation-mega-shadow: var(--shadow-overlay);

  --surface-text-primary: var(--text-primary);
  --surface-text-secondary: var(--text-secondary);
  --surface-text-muted: var(--text-muted);
  --surface-link: var(--color-primary);
  --surface-on-primary: var(--text-on-primary);
  --brand-blue: var(--color-primary);
  --brand-blue-dark: var(--color-primary-active);
  --dark: var(--text-primary);
  --text: var(--text-secondary);
  --muted: var(--text-muted);
  --surface: var(--surface-canvas);
  --border: var(--border-color);
}

/* ========================================================================
   VIP BUSINESS GOLF NETWORK — BUTTON COMPONENT SYSTEM v1.1
   Source of truth for all reusable button variants.
   Logo-derived typography: Times New Roman Italic for brand/display use;
   Myriad Pro Regular family for buttons and controls.
   ======================================================================== */
:root,
:root[data-theme="dark"] {
  --font-button-family: var(--font-primary);
  --button-font-weight: var(--font-weight-semibold);
  --button-letter-spacing: .005em;
  --button-radius: var(--radius-pill);
  --button-transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease, color 180ms ease, background-color 180ms ease, border-color 180ms ease;
  --button-hover-lift: translateY(-2px);
  --button-press-transform: translateY(1px);
  --button-disabled-opacity: .52;

  /* Champagne-gold raised primary action. */
  --button-color-primary-bg: #BF9C62;
  --button-color-primary-hover-bg: #D6B77C;
  --button-color-primary-active-bg: #987541;
  --button-color-primary-text: #080706;
  --button-color-primary-hover-text: #080706;
  --button-color-primary-active-text: #080706;
  --button-border-primary: #987541;
  --button-border-primary-hover: #E7D4AD;
  --button-border-primary-active: #80602F;

  /* Secondary: matte black/charcoal surface with a fine gold edge. */
  --button-color-secondary-bg: #111110;
  --button-color-secondary-hover-bg: rgba(191,156,98,.12);
  --button-color-secondary-active-bg: rgba(191,156,98,.18);
  --button-color-secondary-text: #F5F1E9;
  --button-color-secondary-hover-text: #E7D4AD;
  --button-color-secondary-active-text: #F5F1E9;
  --button-border-secondary: rgba(191,156,98,.36);
  --button-border-secondary-hover: rgba(214,183,124,.78);
  --button-border-secondary-active: #987541;

  /* Outline and tertiary actions use gold, never the former blue/purple palette. */
  --button-color-outline-bg: transparent;
  --button-color-outline-hover-bg: rgba(191,156,98,.12);
  --button-color-outline-active-bg: rgba(191,156,98,.18);
  --button-color-outline-text: #D6B77C;
  --button-color-outline-hover-text: #E7D4AD;
  --button-color-outline-active-text: #E7D4AD;
  --button-border-outline: #BF9C62;
  --button-border-outline-hover: #E7D4AD;
  --button-border-outline-active: #987541;

  --button-color-tertiary-bg: transparent;
  --button-color-tertiary-hover-bg: rgba(191,156,98,.10);
  --button-color-tertiary-active-bg: rgba(191,156,98,.16);
  --button-color-tertiary-text: #D6B77C;
  --button-color-tertiary-hover-text: #E7D4AD;
  --button-color-tertiary-active-text: #E7D4AD;
  --button-border-tertiary: transparent;
  --button-border-tertiary-hover: rgba(191,156,98,.42);
  --button-border-tertiary-active: rgba(191,156,98,.54);

  --button-color-text-bg: transparent;
  --button-color-text-hover-bg: rgba(191,156,98,.08);
  --button-color-text-active-bg: rgba(191,156,98,.14);
  --button-color-text-text: #D6B77C;
  --button-color-text-hover-text: #E7D4AD;
  --button-color-text-active-text: #E7D4AD;
  --button-border-text: transparent;
  --button-border-text-hover: transparent;
  --button-border-text-active: transparent;

  --button-color-icon-bg: #111110;
  --button-color-icon-hover-bg: rgba(191,156,98,.14);
  --button-color-icon-active-bg: rgba(191,156,98,.20);
  --button-color-icon-text: #D6B77C;
  --button-color-icon-hover-text: #E7D4AD;
  --button-color-icon-active-text: #E7D4AD;
  --button-border-icon: rgba(191,156,98,.36);
  --button-border-icon-hover: rgba(214,183,124,.78);
  --button-border-icon-active: #987541;

  --button-color-menu-bg: transparent;
  --button-color-menu-hover-bg: rgba(191,156,98,.10);
  --button-color-menu-active-bg: rgba(191,156,98,.17);
  --button-color-menu-text: #F5F1E9;
  --button-color-menu-hover-text: #E7D4AD;
  --button-color-menu-active-text: #E7D4AD;
  --button-border-menu: rgba(191,156,98,.28);
  --button-border-menu-hover: rgba(214,183,124,.72);
  --button-border-menu-active: #987541;

  /* Legacy gradient variant is now an on-brand gold gradient. */
  --button-color-gradient-bg: linear-gradient(135deg, #E7D4AD 0%, #D6B77C 34%, #BF9C62 72%, #987541 100%);
  --button-color-gradient-hover-bg: linear-gradient(135deg, #F0E4C8 0%, #E7D4AD 36%, #D6B77C 100%);
  --button-color-gradient-active-bg: #987541;
  --button-color-gradient-text: #080706;
  --button-color-gradient-hover-text: #080706;
  --button-color-gradient-active-text: #080706;
  --button-border-gradient: #987541;
  --button-border-gradient-hover: #E7D4AD;
  --button-border-gradient-active: #80602F;

  /* Semantic destructive action deliberately keeps the accessible error color. */
  --button-color-destructive-bg: #B91C1C;
  --button-color-destructive-hover-bg: #991B1B;
  --button-color-destructive-active-bg: #7F1D1D;
  --button-color-destructive-text: #FFFFFF;
  --button-color-destructive-hover-text: #FFFFFF;
  --button-color-destructive-active-text: #FFFFFF;
  --button-border-destructive: #B91C1C;
  --button-border-destructive-hover: #991B1B;
  --button-border-destructive-active: #7F1D1D;

  /* Contrast/light variants remain available for dark image/video surfaces. */
  --button-color-contrast-bg: #F5F1E9;
  --button-color-contrast-hover-bg: #FFFFFF;
  --button-color-contrast-active-bg: #E7D4AD;
  --button-color-contrast-text: #080706;
  --button-color-contrast-hover-text: #080706;
  --button-color-contrast-active-text: #080706;
  --button-border-contrast: #D6B77C;
  --button-border-contrast-hover: #E7D4AD;
  --button-border-contrast-active: #BF9C62;

  --button-color-light-bg: #FFFFFF;
  --button-color-light-hover-bg: #F7F5F0;
  --button-color-light-active-bg: #F0E8D9;
  --button-color-light-text: #080706;
  --button-color-light-hover-text: #080706;
  --button-color-light-active-text: #080706;
  --button-border-light: #BF9C62;
  --button-border-light-hover: #987541;
  --button-border-light-active: #80602F;

  /* Backward-compatible variant name, now styled as the brand gold outline. */
  --button-color-white-outline-bg: transparent;
  --button-color-white-outline-hover-bg: #BF9C62;
  --button-color-white-outline-active-bg: #987541;
  --button-color-white-outline-text: #E7D4AD;
  --button-color-white-outline-hover-text: #080706;
  --button-color-white-outline-active-text: #080706;
  --button-border-white-outline: #BF9C62;
  --button-border-white-outline-hover: #E7D4AD;
  --button-border-white-outline-active: #987541;

  /* Header action variants follow the same champagne palette. */
  --button-color-header-signup-bg: transparent;
  --button-color-header-signup-hover-bg: rgba(191,156,98,.12);
  --button-color-header-signup-active-bg: rgba(191,156,98,.18);
  --button-color-header-signup-text: #F5F1E9;
  --button-color-header-signup-hover-text: #E7D4AD;
  --button-color-header-signup-active-text: #E7D4AD;
  --button-border-header-signup: rgba(191,156,98,.54);
  --button-border-header-signup-hover: #D6B77C;
  --button-border-header-signup-active: #987541;
  --button-color-header-login-bg: #BF9C62;
  --button-color-header-login-hover-bg: #D6B77C;
  --button-color-header-login-active-bg: #987541;
  --button-color-header-login-text: #080706;
  --button-color-header-login-hover-text: #080706;
  --button-color-header-login-active-text: #080706;
  --button-border-header-login: #987541;
  --button-border-header-login-hover: #E7D4AD;
  --button-border-header-login-active: #80602F;

  /* Restrained 3D elevation: bright top edge, gold lower lip, soft shadow. */
  --button-shadow-none: none;
  --button-shadow-default: inset 0 1px 0 rgba(255,255,255,.42), 0 2px 0 #987541, 0 5px 12px rgba(0,0,0,.28);
  --button-shadow-hover: inset 0 1px 0 rgba(255,255,255,.50), 0 3px 0 #987541, 0 9px 18px rgba(0,0,0,.34);
  --button-shadow-active: inset 0 2px 3px rgba(0,0,0,.18), 0 1px 0 #987541;
  --button-shadow-outline: 0 0 0 1px rgba(191,156,98,.06), 0 4px 12px rgba(0,0,0,.18);
  --button-shadow-focus: 0 0 0 3px rgba(214,183,124,.32), 0 4px 12px rgba(0,0,0,.18);
  --button-shadow-gradient: var(--button-shadow-default);
  --button-shadow-gradient-hover: var(--button-shadow-hover);
  --button-shadow-gradient-active: var(--button-shadow-active);
}

:root[data-theme="light"] {
  --font-button-family: var(--font-primary);
  --button-font-weight: var(--font-weight-semibold);
  --button-letter-spacing: .005em;

  --button-color-primary-bg: #BF9C62;
  --button-color-primary-hover-bg: #D6B77C;
  --button-color-primary-active-bg: #987541;
  --button-color-primary-text: #080706;
  --button-color-primary-hover-text: #080706;
  --button-color-primary-active-text: #080706;
  --button-border-primary: #987541;
  --button-border-primary-hover: #80602F;
  --button-border-primary-active: #684C25;

  --button-color-secondary-bg: #FFFFFF;
  --button-color-secondary-hover-bg: #F7F2E8;
  --button-color-secondary-active-bg: #F0E8D9;
  --button-color-secondary-text: #191611;
  --button-color-secondary-hover-text: #191611;
  --button-color-secondary-active-text: #191611;
  --button-border-secondary: rgba(143,109,55,.28);
  --button-border-secondary-hover: rgba(143,109,55,.54);
  --button-border-secondary-active: #8F6D37;

  --button-color-outline-bg: transparent;
  --button-color-outline-hover-bg: rgba(143,109,55,.08);
  --button-color-outline-active-bg: rgba(143,109,55,.15);
  --button-color-outline-text: #8F6D37;
  --button-color-outline-hover-text: #684C25;
  --button-color-outline-active-text: #60451D;
  --button-border-outline: #8F6D37;
  --button-border-outline-hover: #775727;
  --button-border-outline-active: #60451D;

  --button-color-tertiary-bg: transparent;
  --button-color-tertiary-hover-bg: rgba(143,109,55,.08);
  --button-color-tertiary-active-bg: rgba(143,109,55,.14);
  --button-color-tertiary-text: #8F6D37;
  --button-color-tertiary-hover-text: #684C25;
  --button-color-tertiary-active-text: #60451D;
  --button-border-tertiary: transparent;
  --button-border-tertiary-hover: rgba(143,109,55,.32);
  --button-border-tertiary-active: rgba(143,109,55,.44);

  --button-color-text-bg: transparent;
  --button-color-text-hover-bg: rgba(143,109,55,.07);
  --button-color-text-active-bg: rgba(143,109,55,.12);
  --button-color-text-text: #8F6D37;
  --button-color-text-hover-text: #684C25;
  --button-color-text-active-text: #60451D;
  --button-border-text: transparent;
  --button-border-text-hover: transparent;
  --button-border-text-active: transparent;

  --button-color-icon-bg: #FFFFFF;
  --button-color-icon-hover-bg: #F7F2E8;
  --button-color-icon-active-bg: #F0E8D9;
  --button-color-icon-text: #8F6D37;
  --button-color-icon-hover-text: #684C25;
  --button-color-icon-active-text: #60451D;
  --button-border-icon: rgba(143,109,55,.28);
  --button-border-icon-hover: rgba(143,109,55,.54);
  --button-border-icon-active: #8F6D37;

  --button-color-menu-bg: transparent;
  --button-color-menu-hover-bg: rgba(143,109,55,.08);
  --button-color-menu-active-bg: rgba(143,109,55,.14);
  --button-color-menu-text: #191611;
  --button-color-menu-hover-text: #684C25;
  --button-color-menu-active-text: #60451D;
  --button-border-menu: rgba(143,109,55,.28);
  --button-border-menu-hover: rgba(143,109,55,.54);
  --button-border-menu-active: #8F6D37;

  --button-color-gradient-bg: linear-gradient(135deg, #E7D4AD 0%, #D6B77C 34%, #BF9C62 72%, #987541 100%);
  --button-color-gradient-hover-bg: linear-gradient(135deg, #F0E4C8 0%, #E7D4AD 36%, #D6B77C 100%);
  --button-color-gradient-active-bg: #987541;
  --button-color-gradient-text: #080706;
  --button-color-gradient-hover-text: #080706;
  --button-color-gradient-active-text: #080706;
  --button-border-gradient: #987541;
  --button-border-gradient-hover: #80602F;
  --button-border-gradient-active: #684C25;

  --button-color-destructive-bg: #B91C1C;
  --button-color-destructive-hover-bg: #991B1B;
  --button-color-destructive-active-bg: #7F1D1D;
  --button-color-destructive-text: #FFFFFF;
  --button-color-destructive-hover-text: #FFFFFF;
  --button-color-destructive-active-text: #FFFFFF;
  --button-border-destructive: #B91C1C;
  --button-border-destructive-hover: #991B1B;
  --button-border-destructive-active: #7F1D1D;

  --button-color-contrast-bg: #080706;
  --button-color-contrast-hover-bg: #171512;
  --button-color-contrast-active-bg: #29251F;
  --button-color-contrast-text: #F5F1E9;
  --button-color-contrast-hover-text: #F5F1E9;
  --button-color-contrast-active-text: #F5F1E9;
  --button-border-contrast: #080706;
  --button-border-contrast-hover: #080706;
  --button-border-contrast-active: #29251F;

  --button-color-light-bg: #FFFFFF;
  --button-color-light-hover-bg: #F7F5F0;
  --button-color-light-active-bg: #F0E8D9;
  --button-color-light-text: #191611;
  --button-color-light-hover-text: #191611;
  --button-color-light-active-text: #191611;
  --button-border-light: #8F6D37;
  --button-border-light-hover: #775727;
  --button-border-light-active: #60451D;

  --button-color-white-outline-bg: transparent;
  --button-color-white-outline-hover-bg: #BF9C62;
  --button-color-white-outline-active-bg: #987541;
  --button-color-white-outline-text: #8F6D37;
  --button-color-white-outline-hover-text: #080706;
  --button-color-white-outline-active-text: #080706;
  --button-border-white-outline: #8F6D37;
  --button-border-white-outline-hover: #775727;
  --button-border-white-outline-active: #60451D;

  --button-color-header-signup-bg: transparent;
  --button-color-header-signup-hover-bg: rgba(143,109,55,.08);
  --button-color-header-signup-active-bg: rgba(143,109,55,.14);
  --button-color-header-signup-text: #684C25;
  --button-color-header-signup-hover-text: #60451D;
  --button-color-header-signup-active-text: #60451D;
  --button-border-header-signup: rgba(143,109,55,.42);
  --button-border-header-signup-hover: #8F6D37;
  --button-border-header-signup-active: #684C25;
  --button-color-header-login-bg: #BF9C62;
  --button-color-header-login-hover-bg: #D6B77C;
  --button-color-header-login-active-bg: #987541;
  --button-color-header-login-text: #080706;
  --button-color-header-login-hover-text: #080706;
  --button-color-header-login-active-text: #080706;
  --button-border-header-login: #987541;
  --button-border-header-login-hover: #775727;
  --button-border-header-login-active: #60451D;

  --button-shadow-default: inset 0 1px 0 rgba(255,255,255,.52), 0 2px 0 #987541, 0 5px 12px rgba(35,27,16,.14);
  --button-shadow-hover: inset 0 1px 0 rgba(255,255,255,.64), 0 3px 0 #987541, 0 9px 18px rgba(35,27,16,.18);
  --button-shadow-active: inset 0 2px 3px rgba(0,0,0,.12), 0 1px 0 #987541;
  --button-shadow-outline: 0 0 0 1px rgba(143,109,55,.05), 0 4px 12px rgba(35,27,16,.08);
  --button-shadow-focus: 0 0 0 3px rgba(143,109,55,.22), 0 4px 12px rgba(35,27,16,.08);
  --button-shadow-gradient: var(--button-shadow-default);
  --button-shadow-gradient-hover: var(--button-shadow-hover);
  --button-shadow-gradient-active: var(--button-shadow-active);
}

/* ========================================================================
   VIP BUSINESS GOLF NETWORK — GLOBAL RADIUS + GOLD ACTION CONTRAST v2.3
   Approved update: 10px standard for cornered UI/media; circles and pills
   used as intentional shapes keep their semantic geometry unless overridden.
   All champagne-gold primary actions use near-black text and icons.
   ======================================================================== */
:root,
:root[data-theme="dark"],
:root[data-theme="light"],
:root[data-theme="system"] {
  --radius-sharp: 10px;
  --radius-sm: 10px;
  --radius-md: 10px;
  --radius-lg: 10px;
  --radius-xl: 10px;
  --radius-2xl: 10px;
  --radius-3xl: 10px;
  --radius-button-small: 10px;
  --radius-button-medium: 10px;
  --radius-button-default: 10px;
  --radius-button-large: 10px;
  --radius-button-xl: 10px;
  --radius-button-large-mobile: 10px;
  --radius-button-xl-tablet: 10px;
  --radius-button-xl-mobile: 10px;
  --radius-input: 10px;
  --radius-dropdown: 10px;
  --radius-card-small: 10px;
  --radius-card-default: 10px;
  --radius-card-feature: 10px;
  --radius-card-large: 10px;
  --radius-hero: 10px;
  --radius-modal: 10px;
  --radius-popover: 10px;
  --radius-search: 10px;
  --radius-card-feature-mobile: 10px;
  --radius-card-large-mobile: 10px;
  --radius-hero-mobile: 10px;
  --radius-modal-mobile: 10px;
  --navigation-item-radius: 10px;
  --mega-menu-radius: 10px;
  --mega-menu-promo-radius: 10px;
  --mega-menu-mobile-nav-item-radius: 10px;
  --form-input-radius: 10px;
  --form-dropdown-radius: 10px;
  --form-card-radius: 10px;
  --icon-container-radius: 10px;
  --icon-container-feature-radius: 10px;
  --button-radius: 10px;
  --media-radius: 10px;

  --button-color-primary-text: #080706;
  --button-color-primary-hover-text: #080706;
  --button-color-primary-active-text: #080706;
  --button-color-gradient-text: #080706;
  --button-color-gradient-hover-text: #080706;
  --button-color-gradient-active-text: #080706;
  --button-color-header-login-text: #080706;
  --button-color-header-login-hover-text: #080706;
  --button-color-header-login-active-text: #080706;
  --button-color-white-outline-hover-text: #080706;
  --button-color-white-outline-active-text: #080706;
}