:root {
  --surface-tint: #6d28d9;
  --primary: #6d28d9;
  --primary-dim: #5b21b6;
  --primary-container: #ede9fe;
  --secondary: #0369a1;
  --secondary-dim: #075985;
  --secondary-container: #e0f2fe;
  --tertiary: #b45309;
  --tertiary-dim: #92400e;
  --tertiary-container: #fef3c7;
  --on-primary: #faf8ff;
  --on-primary-container: #2e1065;
  --on-secondary: #f0f9ff;
  --on-secondary-container: #0c2a3f;
  --on-tertiary: #fff8f0;
  --on-tertiary-container: #451a03;
  --inverse-primary: #c4b5fd;
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(109, 40, 217, 0.10), rgba(91, 33, 182, 0.04));
}

body {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.06), rgba(224, 242, 254, 0.05)), var(--surface);
}

body::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.65), transparent 20%),
    radial-gradient(circle at 80% 0%, rgba(109, 40, 217, 0.06), transparent 28%),
    repeating-linear-gradient(0deg, rgba(45, 52, 51, 0.015) 0, rgba(45, 52, 51, 0.015) 1px, transparent 1px, transparent 5px);
}

::selection {
  background: rgba(109, 40, 217, 0.15);
  color: var(--on-surface);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-tint: #c4b5fd;
    --primary: #c4b5fd;
    --primary-dim: #a78bfa;
    --primary-container: #4c1d95;
    --secondary: #7dd3fc;
    --secondary-dim: #38bdf8;
    --secondary-container: #0c4a6e;
    --tertiary: #fcd34d;
    --tertiary-dim: #fbbf24;
    --tertiary-container: #78350f;
    --on-primary: #1f0050;
    --on-primary-container: #e9d5ff;
    --on-secondary: #001e2e;
    --on-secondary-container: #bae6fd;
    --on-tertiary: #2d1600;
    --on-tertiary-container: #fde68a;
    --inverse-primary: #6d28d9;
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
    --gradient-hero: linear-gradient(135deg, rgba(196, 181, 253, 0.12), rgba(167, 139, 250, 0.05));
  }
}

html.dark-mode {
  --surface-tint: #c4b5fd;
  --primary: #c4b5fd;
  --primary-dim: #a78bfa;
  --primary-container: #4c1d95;
  --secondary: #7dd3fc;
  --secondary-dim: #38bdf8;
  --secondary-container: #0c4a6e;
  --tertiary: #fcd34d;
  --tertiary-dim: #fbbf24;
  --tertiary-container: #78350f;
  --on-primary: #1f0050;
  --on-primary-container: #e9d5ff;
  --on-secondary: #001e2e;
  --on-secondary-container: #bae6fd;
  --on-tertiary: #2d1600;
  --on-tertiary-container: #fde68a;
  --inverse-primary: #6d28d9;
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(196, 181, 253, 0.12), rgba(167, 139, 250, 0.05));
}

html.dark-mode body {
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.25), rgba(12, 74, 110, 0.12)), var(--surface);
}