/* Generated by tradesite-agent - theme: Vivid (vivid).
   Two colour modes: light (default) and dark (button in the header).
   Edit tokens, never components: all four styles share one markup contract. */
:root, [data-theme="light"] {
  --brand: #5b21b6;
  --brand-strong: #4c1d95;
  --brand-ink: #ffffff;
  --accent: #be185d;
  --accent-hover: #9d174d;
  --accent-ink: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f4fd;
  --surface-3: #e9e4f7;
  --ink: #1c1830;
  --ink-soft: #55507a;
  --line: #d8d2ea;
  --focus: #7c3aed;
  --nav-bg: #4c1d95;
  --nav-ink: #ffffff;
  --footer-bg: #2e1065;
  --footer-ink: #ddd6fe;
  --brand-soft: #ede9fe;
  --accent-soft: #fce7f3;
  --accent-2: #0f766e;
  --accent-2-soft: #e0f2f1;
  --band-bg: #5b21b6;
  --band-ink: #ffffff;
  --gradient-hero: linear-gradient(180deg, #ece7fb 0%, #f8f6fe 55%, #ffffff 100%);
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(28,24,48,.10), 0 12px 30px rgba(28,24,48,.08);
  --shadow-sm: 0 1px 2px rgba(28,24,48,.10);
  --card-border: 1px solid var(--line);
  --field-border: #8a83a8;
  --font-head: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --head-weight: 800;
  --head-tracking: -0.02em;
  --eyebrow-tracking: 0.16em;
  --hero-pad: 4.5rem 0 4rem;
  --section-pad: 4rem 0;
  --mode: light;
}

[data-theme="dark"] {
  --brand: #b39bfb;
  --brand-strong: #c9b8ff;
  --brand-ink: #151222;
  --accent: #fb7fb5;
  --accent-hover: #fda3c8;
  --accent-ink: #1c0a13;
  --surface: #151222;
  --surface-2: #1e1a30;
  --surface-3: #282242;
  --ink: #ece9f8;
  --ink-soft: #b1a9cd;
  --line: #332c4e;
  --focus: #b39bfb;
  --nav-bg: #151222;
  --nav-ink: #ece9f8;
  --footer-bg: #0e0b18;
  --footer-ink: #b1a9cd;
  --brand-soft: #241d40;
  --accent-soft: #3a1b2b;
  --accent-2: #5eead4;
  --accent-2-soft: #10302c;
  --band-bg: #4c1d95;
  --band-ink: #ffffff;
  --gradient-hero: linear-gradient(180deg, #1c1736 0%, #151222 100%);
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow: 0 2px 6px rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --card-border: 1px solid var(--line);
  --field-border: #6f6790;
  --font-head: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --head-weight: 800;
  --head-tracking: -0.02em;
  --eyebrow-tracking: 0.16em;
  --hero-pad: 4.5rem 0 4rem;
  --section-pad: 4rem 0;
  --mode: dark;
}