:root {
  /* Constants */
  --clubex-ratio-phi: 1.618;
  --clubex-grid: 4px;
  --clubex-rhythm: 8px;

  /* Colors */
  --clubex-color-primary: #2563EB;
  --clubex-color-primary-hover: #1D4ED8;
  --clubex-color-primary-light: #DBEAFE;
  --clubex-color-accent: #F59E0B;
  --clubex-color-accent-light: #FEF3C7;
  --clubex-color-bg: #FFFFFF;
  --clubex-color-bg-subtle: #F9FAFB;
  --clubex-color-border: #E5E7EB;
  --clubex-color-text: #111827;
  --clubex-color-text-muted: #6B7280;
  --clubex-color-text-light: #9CA3AF;
  --clubex-color-success: #10B981;
  --clubex-color-warning: #F59E0B;
  --clubex-color-error: #EF4444;
  --clubex-color-info: #3B82F6;
  --clubex-color-text-inverse: #FFFFFF;

  /* Typography */
  --clubex-font-family: 'Inter', sans-serif;
  --clubex-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --clubex-font-size-12: 12px;
  --clubex-font-size-14: 14px;
  --clubex-font-size-16: 16px;
  --clubex-font-size-20: 20px;
  --clubex-font-size-24: 24px;
  --clubex-font-size-32: 32px;
  --clubex-font-size-52: 52px;
  --clubex-font-weight-400: 400;
  --clubex-font-weight-500: 500;
  --clubex-font-weight-600: 600;
  --clubex-font-weight-700: 700;
  --clubex-line-height-tight: 1.2;
  --clubex-line-height-base: 1.5;

  /* Spacing: 4px grid, 8px rhythm, phi macro steps snapped to 4px */
  --clubex-space-4: 4px;
  --clubex-space-8: 8px;
  --clubex-space-12: 12px;
  --clubex-space-16: 16px;
  --clubex-space-20: 20px;
  --clubex-space-32: 32px;
  --clubex-space-52: 52px;

  /* Radii */
  --clubex-radius-8: 8px;
  --clubex-radius-12: 12px;
  --clubex-radius-20: 20px;
  --clubex-radius-pill: 999px;

  /* Elevation: intentionally light */
  --clubex-shadow-none: none;
  --clubex-shadow-subtle: 0 1px 2px rgba(17, 24, 39, 0.06);
  --clubex-shadow-raised: 0 8px 20px rgba(17, 24, 39, 0.08);
  --clubex-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.24);

  /* Runtime sizes */
  --clubex-control-height-admin: 40px;
  --clubex-control-height-input: 44px;
  --clubex-touch-target-min: 48px;
  --clubex-touch-target-pos: 56px;

  /* Breakpoints */
  --clubex-breakpoint-mobile: 720px;
  --clubex-breakpoint-tablet: 960px;
  --clubex-breakpoint-desktop: 1280px;

  /* Z-index */
  --clubex-z-base: 0;
  --clubex-z-sticky: 10;
  --clubex-z-drawer: 40;
  --clubex-z-popover: 80;
  --clubex-z-toast: 90;
  --clubex-z-backdrop: 9998;
  --clubex-z-modal: 10000;
}