/* ══════════ DESIGN TOKENS — Virtu8s Academy (Light Theme) ══════════ */
:root {
  /* ── Brand Colors ── */
  --color-primary: #CF9D45;
  --color-primary-dark: #B58A3A;
  --color-primary-light: #CF9D45;
  --color-primary-rgb: 207, 157, 69;

  --color-dark: #2E2E2E;
  --color-dark-rgb: 46, 46, 46;
  --color-black: #000000;
  --color-white: #FFFFFF;

  /* ── Backgrounds ── */
  --bg-main: #FAFAF3;
  --bg-section-alt: #F2F0E8;
  --bg-blue-light: #DFE8FF;
  --bg-blue-medium: #BED0FF;
  --bg-card: #FFFFFF;
  --bg-footer: #2E2E2E;
  --bg-navbar: #FFFFFF;

  /* ── Text ── */
  --text-primary: #000000;
  --text-secondary: #444444;
  --text-muted: #666666;
  --text-light: #999999;
  --text-on-dark: #F0F0F0;
  --text-on-primary: #FFFFFF;

  /* ── Typography (scaled to match Wix with responsive clamp) ── */
  --font-body: 'Wix Madefor Text', Arial, Helvetica, sans-serif;
  --font-heading: 'Wix Madefor Display', 'Wix Madefor Text', Arial, Helvetica, sans-serif;

  /* Wix originals: H1=165px, H2=100px, H3=60px, label=52px */
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1.125rem;
  /* 18px like Wix body */
  --fs-md: 1.25rem;
  --fs-lg: 1.5rem;
  --fs-xl: clamp(1.5rem, 2.5vw, 2rem);
  --fs-2xl: clamp(1.75rem, 3vw, 2.5rem);
  --fs-3xl: clamp(2rem, 4vw, 3.75rem);
  /* ~60px max like Wix H3 */
  --fs-4xl: clamp(2.5rem, 6vw, 6rem);
  /* ~96px max like Wix H2 */
  --fs-5xl: clamp(3rem, 10vw, 9rem);
  /* ~144px max like Wix H1 */
  --fs-hero-label: clamp(1rem, 3vw, 2.5rem);
  /* ~40px for hero label */
  --fs-btn: clamp(0.9rem, 1.5vw, 1.5rem);
  /* ~24px for buttons */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.1;
  --lh-normal: 1.4;
  --lh-relaxed: 1.7;

  /* ── Spacing ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 3rem;
  --space-4xl: 4.5rem;
  --space-5xl: 6rem;
  --space-6xl: 7rem;

  /* ── Layout ── */
  --max-width: 1400px;
  --navbar-height: 80px;

  /* ── Borders & Radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 50px;
  --radius-full: 50%;

  --border-light: 1px solid #E0DDD5;
  --border-medium: 1px solid #CCC9C0;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-Index ── */
  --z-navbar: 100;
  --z-modal: 200;
  --z-tooltip: 300;
}