:root{
  /* Typography — Minimal Mobile Spec: single family Inter, 2 weights, 3-4 sizes */
  --cw-font: 'Inter', system-ui, -apple-system, 'SF Pro', Roboto, sans-serif;
  --cw-font-display: var(--cw-font);
  --cw-font-body: var(--cw-font);
  --cw-font-mono: var(--cw-font);

  /* Type scale px → rem (base 16) */
  --cw-text-caption: 0.75rem;   /* 12px floor */
  --cw-text-sm: 0.875rem;       /* 14px secondary */
  --cw-text-md: 1rem;           /* 16px body primary */
  --cw-text-h2: 1.25rem;        /* 20px section header */
  --cw-text-h1: 1.5rem;         /* 24px screen title */
  --cw-text-display: 2rem;      /* 32px hero max */

  /* Weight — only 400 + 600 per spec */
  --cw-weight-regular: 400;
  --cw-weight-semibold: 600;
  --cw-weight-bold: 600;

  /* Spacing — 8pt grid */
  --cw-space-xs: 4px;
  --cw-space-sm: 8px;
  --cw-space-md: 16px;
  --cw-space-lg: 24px;
  --cw-space-xl: 32px;
  --cw-space-xxl: 48px;
  /* legacy aliases */
  --cw-space-1: 4px; --cw-space-2: 8px; --cw-space-3: 12px; --cw-space-4: 16px; --cw-space-5: 24px; --cw-space-6: 32px; --cw-space-8: 48px; --cw-space-10: 64px;

  /* Neutrals — 7 grays, grayscale carries 80% UI */
  --cw-gray-50: #F8FAFC;
  --cw-gray-100: #F1F5F9;
  --cw-gray-200: #E2E8F0;
  --cw-gray-300: #CBD5E1;
  --cw-gray-400: #94A3B8;
  --cw-gray-500: #64748B;
  --cw-gray-700: #334155;
  --cw-gray-900: #0F172A;

  /* Semantic — single primary + accent, rest neutral */
  --cw-primary: #0284C7;          /* primary action */
  --cw-primary-hover: #0369A1;
  --cw-primary-active: #075985;
  --cw-accent: #0284C7;
  --cw-accent-hover: #0369A1;
  --cw-accent-ink: #FFFFFF;
  --cw-accent-tint: #E0F2FE;
  --cw-accent-deep: #0369A1;

  --cw-ink-900: var(--cw-gray-900);
  --cw-ink-800: var(--cw-gray-700);

  --cw-text: var(--cw-gray-700);
  --cw-text-strong: var(--cw-gray-900);
  --cw-muted: var(--cw-gray-500);
  --cw-faint: var(--cw-gray-400);

  --cw-canvas: var(--cw-gray-50);
  --cw-surface: #FFFFFF;
  --cw-surface-2: var(--cw-gray-100);
  --cw-border: var(--cw-gray-200);
  --cw-border-strong: var(--cw-gray-300);

  --cw-success: #16A34A; --cw-success-tint: #DCFCE7;
  --cw-warning: #D97706; --cw-warning-tint: #FEF3C7;
  --cw-danger: #DC2626;  --cw-danger-tint: #FEE2E2;
  --cw-info: var(--cw-primary); --cw-info-tint: var(--cw-accent-tint);

  /* Radius — minimal, only sm/md */
  --cw-radius-sm: 6px;
  --cw-radius-md: 10px;
  --cw-radius-lg: 10px;

  /* Shadow — whitespace is component, minimal shadow */
  --cw-shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --cw-shadow-md: 0 2px 8px rgba(15,23,42,0.06);
  --cw-shadow-lg: 0 4px 16px rgba(15,23,42,0.08);

  --cw-ease: ease;
  --cw-dur-fast: 150ms;
  --cw-dur-med: 200ms;
  --cw-dur-slow: 250ms;

  /* Touch & Mobile ergonomics — 44pt / 48dp min, 8 gap, CTA 48-56, input 44-52 */
  --cw-touch-target-min: 44px;
  --cw-touch-gap-min: 8px;
  --cw-cta-height: 48px;
  --cw-input-height: 44px;
  --cw-bottom-nav-height: 56px;
  --cw-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --cw-header-mobile-height: 52px;
  --cw-z-mobile-header: 1020;
  --cw-z-mobile-bottom-nav: 1030;
  --cw-z-fab: 1035;
  --cw-z-bottom-sheet: 1040;
  --cw-screen-margin: 16px;

  /* Bootstrap mapping */
  --bs-primary: var(--cw-primary);
  --bs-primary-rgb: 2,132,199;
  --bs-primary-text-emphasis: var(--cw-primary);
  --bs-primary-bg-subtle: var(--cw-accent-tint);
  --bs-secondary: var(--cw-gray-500);
  --bs-success: var(--cw-success);
  --bs-warning: var(--cw-warning);
  --bs-danger: var(--cw-danger);
  --bs-info: var(--cw-info);
  --bs-body-color: var(--cw-text);
  --bs-body-bg: var(--cw-canvas);
  --bs-border-color: var(--cw-border);
  --bs-focus-ring-color: rgba(2,132,199,0.3);
  --bs-font-sans-serif: var(--cw-font);
  --bs-body-font-family: var(--cw-font);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
}
.dark{ --cw-canvas:#0F172A; --cw-surface:#1E293B; --cw-surface-2:#334155; --cw-border:#334155; --cw-border-strong:#475569; --cw-text:#E2E8F0; --cw-text-strong:#F8FAFC; --cw-muted:#94A3B8; }