:root {
  --surface-tint: #0f766e;
  --primary: #0f766e;
  --primary-dim: #115e59;
  --primary-container: #ccfbf1;
  --secondary: #1d4ed8;
  --secondary-dim: #1e40af;
  --secondary-container: #dbeafe;
  --tertiary: #be185d;
  --tertiary-dim: #9d174d;
  --tertiary-container: #fce7f3;
  --on-primary: #f3fffd;
  --on-primary-container: #042f2e;
  --on-secondary: #f8fbff;
  --on-secondary-container: #172554;
  --on-tertiary: #fff7fb;
  --on-tertiary-container: #500724;
  --inverse-primary: #5eead4;
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(15, 118, 110, 0.11), rgba(29, 78, 216, 0.05));
}

body {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.06), rgba(219, 234, 254, 0.06)), var(--surface);
}

body::before {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.66), transparent 20%),
    radial-gradient(circle at 84% 0%, rgba(29, 78, 216, 0.08), transparent 26%),
    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(15, 118, 110, 0.18);
  color: var(--on-surface);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-tint: #5eead4;
    --primary: #5eead4;
    --primary-dim: #2dd4bf;
    --primary-container: #134e4a;
    --secondary: #93c5fd;
    --secondary-dim: #60a5fa;
    --secondary-container: #1e3a8a;
    --tertiary: #f9a8d4;
    --tertiary-dim: #f472b6;
    --tertiary-container: #831843;
    --on-primary: #062523;
    --on-primary-container: #ccfbf1;
    --on-secondary: #09111f;
    --on-secondary-container: #dbeafe;
    --on-tertiary: #3d0821;
    --on-tertiary-container: #fce7f3;
    --inverse-primary: #0f766e;
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
    --gradient-hero: linear-gradient(135deg, rgba(94, 234, 212, 0.13), rgba(96, 165, 250, 0.06));
  }
}

html.dark-mode {
  --surface-tint: #5eead4;
  --primary: #5eead4;
  --primary-dim: #2dd4bf;
  --primary-container: #134e4a;
  --secondary: #93c5fd;
  --secondary-dim: #60a5fa;
  --secondary-container: #1e3a8a;
  --tertiary: #f9a8d4;
  --tertiary-dim: #f472b6;
  --tertiary-container: #831843;
  --on-primary: #062523;
  --on-primary-container: #ccfbf1;
  --on-secondary: #09111f;
  --on-secondary-container: #dbeafe;
  --on-tertiary: #3d0821;
  --on-tertiary-container: #fce7f3;
  --inverse-primary: #0f766e;
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(94, 234, 212, 0.13), rgba(96, 165, 250, 0.06));
}

html.dark-mode body {
  background: linear-gradient(135deg, rgba(19, 78, 74, 0.25), rgba(30, 58, 138, 0.12)), var(--surface);
}