:root {
  --surface-tint: #1a5c8a;
  --primary: #1a5c8a;
  --primary-dim: #134a72;
  --primary-container: #cce3f5;
  --secondary: #2e7d5e;
  --secondary-dim: #236348;
  --secondary-container: #c8ead9;
  --tertiary: #5a4a8a;
  --tertiary-dim: #46396e;
  --tertiary-container: #ddd5f5;
  --on-primary: #f5faff;
  --on-primary-container: #0a2e47;
  --on-secondary: #f4fcf8;
  --on-secondary-container: #0e3527;
  --on-tertiary: #faf8ff;
  --on-tertiary-container: #29204a;
  --inverse-primary: #9ccde8;
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(26, 92, 138, 0.12), rgba(19, 74, 114, 0.04));
}

body {
  background: linear-gradient(135deg, rgba(26, 92, 138, 0.07), rgba(200, 234, 217, 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(26, 92, 138, 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(26, 92, 138, 0.16);
  color: var(--on-surface);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-tint: #9ccde8;
    --primary: #9ccde8;
    --primary-dim: #6db5da;
    --primary-container: #0f3d5c;
    --secondary: #7ecbaa;
    --secondary-dim: #54b48e;
    --secondary-container: #1a4d38;
    --tertiary: #bfb0e8;
    --tertiary-dim: #9a89d4;
    --tertiary-container: #3d2f6b;
    --on-primary: #052030;
    --on-primary-container: #cce8f8;
    --on-secondary: #062018;
    --on-secondary-container: #c4f0da;
    --on-tertiary: #1a1030;
    --on-tertiary-container: #e8e0fc;
    --inverse-primary: #1a5c8a;
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
    --gradient-hero: linear-gradient(135deg, rgba(156, 205, 232, 0.14), rgba(109, 181, 218, 0.05));
  }
}

html.dark-mode {
  --surface-tint: #9ccde8;
  --primary: #9ccde8;
  --primary-dim: #6db5da;
  --primary-container: #0f3d5c;
  --secondary: #7ecbaa;
  --secondary-dim: #54b48e;
  --secondary-container: #1a4d38;
  --tertiary: #bfb0e8;
  --tertiary-dim: #9a89d4;
  --tertiary-container: #3d2f6b;
  --on-primary: #052030;
  --on-primary-container: #cce8f8;
  --on-secondary: #062018;
  --on-secondary-container: #c4f0da;
  --on-tertiary: #1a1030;
  --on-tertiary-container: #e8e0fc;
  --inverse-primary: #1a5c8a;
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(156, 205, 232, 0.14), rgba(109, 181, 218, 0.05));
}

html.dark-mode body {
  background: linear-gradient(135deg, rgba(15, 61, 92, 0.28), rgba(61, 47, 107, 0.12)), var(--surface);
}