:root {
  --surface-tint: #2f6672;

  --primary: #2f6672;
  --primary-dim: #244f5a;
  --primary-container: #c9e6ec;
  --secondary: #75602f;
  --secondary-dim: #5d4c24;
  --secondary-container: #eadfbf;
  --tertiary: #5c5f86;
  --tertiary-dim: #484b6c;
  --tertiary-container: #d8daf0;

  --on-primary: #f4fdff;
  --on-primary-container: #082b33;
  --on-secondary: #fffaf0;
  --on-secondary-container: #2b2108;
  --on-tertiary: #f8f8ff;
  --on-tertiary-container: #171a38;
  --inverse-primary: #8ccddd;

  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(47, 102, 114, 0.12), rgba(117, 96, 47, 0.07));
}

body {
  background: linear-gradient(135deg, rgba(47, 102, 114, 0.07), rgba(117, 96, 47, 0.05)), var(--surface);
}

body::before {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.62), transparent 20%),
    radial-gradient(circle at 82% 6%, rgba(47, 102, 114, 0.08), transparent 30%),
    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(47, 102, 114, 0.18);
  color: var(--on-surface);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-tint: #8ccddd;
    --primary: #8ccddd;
    --primary-dim: #66b6c8;
    --primary-container: #0d4550;
    --secondary: #d2bf7a;
    --secondary-dim: #b69e58;
    --secondary-container: #483a10;
    --tertiary: #bbbff0;
    --tertiary-dim: #969bd2;
    --tertiary-container: #303458;
    --on-primary: #082b33;
    --on-primary-container: #c7edf4;
    --on-secondary: #2b2108;
    --on-secondary-container: #f0e4b6;
    --on-tertiary: #171a38;
    --on-tertiary-container: #e1e3ff;
    --inverse-primary: #2f6672;
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
    --gradient-hero: linear-gradient(135deg, rgba(140, 205, 221, 0.14), rgba(210, 191, 122, 0.08));
  }
}

html.dark-mode {
  --surface-tint: #8ccddd;
  --primary: #8ccddd;
  --primary-dim: #66b6c8;
  --primary-container: #0d4550;
  --secondary: #d2bf7a;
  --secondary-dim: #b69e58;
  --secondary-container: #483a10;
  --tertiary: #bbbff0;
  --tertiary-dim: #969bd2;
  --tertiary-container: #303458;
  --on-primary: #082b33;
  --on-primary-container: #c7edf4;
  --on-secondary: #2b2108;
  --on-secondary-container: #f0e4b6;
  --on-tertiary: #171a38;
  --on-tertiary-container: #e1e3ff;
  --inverse-primary: #2f6672;
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(140, 205, 221, 0.14), rgba(210, 191, 122, 0.08));
}

html.dark-mode body {
  background: linear-gradient(135deg, rgba(13, 69, 80, 0.28), rgba(72, 58, 16, 0.16)), var(--surface);
}