/* ============================================================
   Witivio Design System 2026 v3 — Tokens
   All custom properties use the --w- prefix.
   ============================================================ */

:root {
  /* ── Primary palette ── */
  --w-primary: #903163;
  --w-primary-rgb: 144, 49, 99;
  --w-primary-hover: #762851;
  --w-primary-light: #F2E6EC;
  --w-black: #000000;
  --w-white: #FFFFFF;

  --w-primary-50:  #F2E6EC;
  --w-primary-100: #C898B1;
  --w-primary-200: #AC658A;
  --w-primary-400: #903163;
  --w-primary-600: #762851;
  --w-primary-800: #632245;
  --w-primary-900: #361326;

  /* ── Secondary palette ── */
  --w-mauve:      #C27CA1;
  --w-moonstone:  #38B3C2;
  --w-spacecadet: #2E2951;
  --w-lavender:   #716988;
  --w-teal:       #008080;

  /* ── Backgrounds ── */
  --w-bg-primary:   #FFFFFF;
  --w-bg-secondary: #F8F5F7;
  --w-bg-tertiary:  #F2E6EC;
  --w-bg-dark:      #1A1A1A;
  --w-bg-hero:      #111111;

  /* ── Text ── */
  --w-text-primary:   #1A1A1A;
  --w-text-secondary: #4A4A4A;
  --w-text-muted:     #716988;
  --w-text-inverse:   #FFFFFF;
  --w-text-accent:    #903163;

  /* ── Interactive ── */
  --w-cta-primary:         #903163;
  --w-cta-primary-hover:   #762851;
  --w-cta-secondary:       #38B3C2;
  --w-cta-secondary-hover: #2D9BA8;

  /* ── Functional / Semantic ── */
  --w-success: #008080;
  --w-warning: #E8A838;
  --w-error:   #D44040;
  --w-info:    #38B3C2;

  /* ── Borders ── */
  --w-border-light:   #E8E0E5;
  --w-border-default: #D0C4CC;
  --w-border-dark:    #903163;

  /* ── Typography ── */
  --w-font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --w-font-mono:    'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  --w-font-xs:   clamp(0.75rem,   0.7rem  + 0.25vw,  0.8125rem);
  --w-font-sm:   clamp(0.8125rem, 0.775rem + 0.2vw,  0.875rem);
  --w-font-base: clamp(1rem,      0.95rem + 0.25vw,  1.125rem);
  --w-font-lg:   clamp(1.125rem,  1.05rem + 0.375vw, 1.25rem);
  --w-font-xl:   clamp(1.25rem,   1.1rem  + 0.75vw,  1.5rem);
  --w-font-2xl:  clamp(1.5rem,    1.25rem + 1.25vw,  2rem);
  --w-font-3xl:  clamp(1.875rem,  1.5rem  + 1.875vw, 2.5rem);
  --w-font-4xl:  clamp(2.25rem,   1.75rem + 2.5vw,   3.25rem);
  --w-font-5xl:  clamp(3rem,      2.25rem + 3.75vw,  4.5rem);

  /* ── Spacing (4px base) ── */
  --w-space-1:  4px;
  --w-space-2:  8px;
  --w-space-3:  12px;
  --w-space-4:  16px;
  --w-space-5:  20px;
  --w-space-6:  24px;
  --w-space-8:  32px;
  --w-space-10: 40px;
  --w-space-12: 48px;
  --w-space-16: 64px;
  --w-space-20: 80px;
  --w-space-24: 96px;
  --w-space-32: 128px;

  --w-section-sm: 64px;
  --w-section-md: 80px;
  --w-section-lg: 96px;
  --w-section-xl: 128px;

  /* ── Radii ── */
  --w-radius-sm:   4px;
  --w-radius-md:   8px;
  --w-radius-lg:   12px;
  --w-radius-xl:   16px;
  --w-radius-2xl:  20px;
  --w-radius-full: 999px;

  /* ── Shadows ── */
  --w-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
  --w-shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --w-shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --w-shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.15);
  --w-shadow-glow:  0 0 60px rgba(144, 49, 99, 0.3);
  --w-shadow-brand: 0 8px 24px rgba(144, 49, 99, 0.12);

  /* ── Layout ── */
  --w-max-width:       960px;
  --w-max-width-wide:  1600px;
  --w-header-height:   64px;
  --w-sidebar-width:   220px;
}

[data-theme="dark"],
.w-dark {
  --w-bg-primary:     #111111;
  --w-bg-secondary:   #1A1A1A;
  --w-bg-tertiary:    #2E2951;
  --w-text-primary:   #FFFFFF;
  --w-text-secondary: rgba(255, 255, 255, 0.7);
  --w-text-muted:     rgba(255, 255, 255, 0.5);
  --w-text-inverse:   #1A1A1A;
  --w-border-light:   rgba(255, 255, 255, 0.06);
  --w-border-default: rgba(255, 255, 255, 0.1);
}