:root {
  /* Brand */
  --brand:#673DE6; --brand-dark:#4e26d4; --brand-deeper:#3619b5;
  --brand-light:#f4f0ff; --brand-mid:#ede9fe;

  /* Neutrals */
  --white:#fff;
  --gray-50:#f9f9fb; --gray-100:#f3f3f7; --gray-150:#eaeaf0;
  --gray-200:#e2e2ec; --gray-300:#cbcbd8; --gray-400:#9999b0;
  --gray-500:#6b6b80; --gray-600:#4a4a60; --gray-700:#33334a;
  --gray-800:#1e1e30; --gray-900:#12121e;

  /* Semantic */
  --text:var(--gray-900); --text-muted:var(--gray-500); --text-soft:var(--gray-400);
  --border:var(--gray-200); --border-soft:var(--gray-150);
  --surface:var(--white); --surface-alt:var(--gray-50);

  /* Icons — monochrome */
  --icon-bg:var(--brand-mid); --icon-color:var(--brand);

  /* Status */
  --success:#15803d; --success-light:#f0fdf4; --success-border:#bbf7d0;
  --error:#dc2626;   --error-light:#fef2f2;  --error-border:#fecaca;
  --warning:#b45309; --warning-light:#fffbeb;

  /* Spacing — primary short names */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem;
  --s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem;
  --s16:4rem;  --s20:5rem; --s24:6rem;

  /* Spacing — aliases (for legacy megamenu.css etc.) */
  --space-1:.25rem; --space-2:.5rem; --space-3:.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;

  /* Radii */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px;
  --r-xl:18px; --r-2xl:24px; --r-full:9999px;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 1px 4px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:0 8px 32px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05);
  --shadow-xl:0 16px 48px rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.06);
  --shadow-brand:0 4px 20px rgba(103,61,230,.20);
  --shadow-brand-lg:0 8px 40px rgba(103,61,230,.28);

  /* Transitions */
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:120ms var(--ease); --t-base:200ms var(--ease); --t-slow:300ms var(--ease);

  /* Layout */
  --nav-h:64px; --max-w:1400px; --max-w-sm:780px; --max-w-xs:500px;
}

/* ── WTS Brand colors (from logo) ── */
:root {
  --wts-dark:    #001d30;
  --wts-purple:  #b146f8;
  --wts-cyan:    #5ccbf9;
  --wts-grad:    linear-gradient(90deg, #b146f8 0%, #5ccbf9 100%);
  --wts-grad-135:linear-gradient(135deg, #b146f8 0%, #5ccbf9 100%);
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --text:         #f0f0f8;
  --text-muted:   #9999b8;
  --text-soft:    #6b6b85;
  --border:       #2a2a3d;
  --border-soft:  #222236;
  --surface:      #13131f;
  --surface-alt:  #0e0e1a;
  --white:        #13131f;
  --gray-50:      #0e0e1a;
  --gray-100:     #16162a;
  --gray-150:     #1c1c30;
  --gray-200:     #222236;
  --gray-300:     #33334a;
  --gray-400:     #5a5a75;
  --gray-500:     #9999b8;
  --gray-600:     #b8b8d0;
  --gray-700:     #d0d0e8;
  --gray-800:     #e8e8f5;
  --gray-900:     #f4f4fc;
  --brand-light:  #1e1040;
  --brand-mid:    #2a1860;
  --icon-bg:      #2a1860;
  --icon-color:   #c084fc;
  --success-light:   #052e16;
  --success-border:  #166534;
  --error-light:     #2d1010;
  --error-border:    #7f1d1d;
  --warning-light:   #2d1f00;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.7),0 4px 16px rgba(0,0,0,.5);
}