/**
 * Regulars Design System — Design Tokens
 * Single source of truth for all brand colors, typography, spacing.
 * Version: 1.0.0
 * Last updated: 2026-03-27
 *
 * Import this file first in any Regulars web property.
 * Changes here cascade to all sites automatically.
 */

:root {
  /* ── Colors: Brand ── */
  --color-brand-primary: #7C5CFC;
  --color-brand-cta: #E84C44;
  --color-brand-success: #3BAF6E;

  /* ── Colors: Dark Backgrounds ── */
  --color-bg-dark: #0D0B16;
  --color-bg-card: #1E1A2E;
  --color-bg-mid: #161224;

  /* ── Colors: Dark Text ── */
  --color-text-primary: #FAF8FE;
  --color-text-secondary: #B8ADCE;

  /* ── Colors: Dark Borders ── */
  --color-border-purple: #7C5CFC;
  --color-border-subtle: #2E2845;

  /* ── Colors: Light Mode ── */
  --color-bg-light: #FAF8FE;
  --color-bg-card-light: #FFFFFF;
  --color-border-light: #E8E0FF;
  --color-text-dark: #221A36;
  --color-text-mid: #4A3F6B;

  /* ── Typography: Fonts ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', sans-serif;

  /* ── Typography: Sizes ── */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* ── Typography: Weights ── */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* ── Spacing ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Border Radius ── */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-card: 0 4px 24px rgba(124, 92, 252, 0.12);
  --shadow-card-hover: 0 8px 40px rgba(124, 92, 252, 0.24);
  --shadow-cta: 0 4px 16px rgba(232, 76, 68, 0.32);
  --shadow-glow: 0 0 60px rgba(124, 92, 252, 0.15);
}

/* ── Dark Mode Overrides ── */
[data-theme="dark"],
html.dark-mode {
  --color-bg-light: #0D0B16;
  --color-bg-card-light: #1E1A2E;
  --color-border-light: #2E2845;
  --color-text-dark: #FAF8FE;
  --color-text-mid: #B8ADCE;
}