:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --radius-xl: 20px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --shadow-1: 0 2px 8px rgba(0,0,0,0.08);

  /* Color tokens */
  --bg: #0f172a;
  --surface: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --ring-bg: #1f2937;
  --ring-track: #374151;
  --ring-track-color: #cbd5e1; /* default ring background stroke */

  /* Theme primaries (overridden per data-theme) */
  --primary: #3b82f6;
  --primary-contrast: #0b1220;
  --accent: #60a5fa;
  --page-start: #0ea5e9; /* gradient backgrounds per theme */
  --page-end: #93c5fd;
  --logo-color: #1e3a8a;
  --icon-color: #111827;
  --phase-color: var(--text);
  --number-color: var(--text);
  --counter-color: var(--muted);
  --ring-progress-color: var(--accent);

  /* Stealth overrides applied via [data-stealth="true"] */
  --stealth-surface: #0b0f1a;
  --stealth-text: #cbd5e1;
  --stealth-muted: #6b7280;
}

html[data-theme="male"] {
  --primary: #3B82C4;
  --accent: #3B82C4;
  --logo-color: #1e3a8a;
  --page-start: #D8ECF9;
  --page-end: #D8ECF9;
  --phase-color: #3B4A5A;
  --number-color: #3B4A5A;
  --counter-color: #3B4A5A;
  --ring-progress-color: #3B82C4;
  --icon-color: #3B4A5A;
  --ring-track-color: #b6d2e6;
}

html[data-theme="female"] {
  --primary: #E24275; /* ring */
  --accent: #E24275;
  --logo-color: #ffffff;
  --page-start: #F889AC;
  --page-end: #F889AC;
  --phase-color: #ffffff;
  --number-color: #ffffff;
  --counter-color: #ffffff;
  --ring-progress-color: #E24275;
  --icon-color: #ffffff;
  --ring-track-color: #f3a0b9;
}

html[data-theme="middle"] {
  /* rainbow accent for strokes/accents */
  --primary: linear-gradient(90deg, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6);
  --accent: #a78bfa;
  --logo-color: #9333ea;
  --page-start: #ffe3ec;
  --page-end: #ffd8b5;
  --phase-color: #4b5563;
  --number-color: #374151;
  --counter-color: #374151;
  --ring-progress-color: #8b5cf6;
  --icon-color: #4b5563;
  --ring-track-color: #f2e7ff;
}

html[data-stealth="true"] {
  --surface: var(--stealth-surface);
  --text: #0f172a;
  --muted: #334155;
  --logo-color: #ffffff;
  --page-start: #f1f5f9;
  --page-end: #e2e8f0;
}