:root {
  --surface-tint: #6b3fa0;

  --primary: #6b3fa0;
  --primary-dim: #552e82;
  --primary-container: #e8d8f8;
  --secondary: #8a5a2e;
  --secondary-dim: #6e4822;
  --secondary-container: #f5e0c8;
  --tertiary: #2e6b7a;
  --tertiary-dim: #235462;
  --tertiary-container: #c8e8ee;

  --on-primary: #faf5ff;
  --on-primary-container: #2d1260;
  --on-secondary: #fffaf5;
  --on-secondary-container: #3a2000;
  --on-tertiary: #f4fcff;
  --on-tertiary-container: #0e2e38;
  --inverse-primary: #c8a0e8;

  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(107, 63, 160, 0.12), rgba(85, 46, 130, 0.05));
}

body {
  background: linear-gradient(135deg, rgba(107, 63, 160, 0.07), rgba(138, 90, 46, 0.04)), 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(107, 63, 160, 0.07), 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(107, 63, 160, 0.16);
  color: var(--on-surface);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-tint: #c8a0e8;
    --primary: #c8a0e8;
    --primary-dim: #a878d0;
    --primary-container: #4a1e80;
    --secondary: #d4a878;
    --secondary-dim: #b88858;
    --secondary-container: #5a3800;
    --tertiary: #80c8d8;
    --tertiary-dim: #60a8bc;
    --tertiary-container: #0e4858;
    --on-primary: #2d1260;
    --on-primary-container: #eeddf8;
    --on-secondary: #3a2000;
    --on-secondary-container: #f8e8d0;
    --on-tertiary: #0e2e38;
    --on-tertiary-container: #c8eef8;
    --inverse-primary: #6b3fa0;
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
    --gradient-hero: linear-gradient(135deg, rgba(200, 160, 232, 0.14), rgba(168, 120, 208, 0.06));
  }
}

html.dark-mode {
  --surface-tint: #c8a0e8;
  --primary: #c8a0e8;
  --primary-dim: #a878d0;
  --primary-container: #4a1e80;
  --secondary: #d4a878;
  --secondary-dim: #b88858;
  --secondary-container: #5a3800;
  --tertiary: #80c8d8;
  --tertiary-dim: #60a8bc;
  --tertiary-container: #0e4858;
  --on-primary: #2d1260;
  --on-primary-container: #eeddf8;
  --on-secondary: #3a2000;
  --on-secondary-container: #f8e8d0;
  --on-tertiary: #0e2e38;
  --on-tertiary-container: #c8eef8;
  --inverse-primary: #6b3fa0;
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(200, 160, 232, 0.14), rgba(168, 120, 208, 0.06));
}

html.dark-mode body {
  background: linear-gradient(135deg, rgba(74, 30, 128, 0.28), rgba(90, 56, 0, 0.14)), var(--surface);
}