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

  --primary: #2e6b3a;
  --primary-dim: #22542e;
  --primary-container: #c8ecd4;
  --secondary: #5a7a3a;
  --secondary-dim: #47622e;
  --secondary-container: #daeec8;
  --tertiary: #3a6b5a;
  --tertiary-dim: #2e5548;
  --tertiary-container: #c8ead8;

  --on-primary: #f4fff6;
  --on-primary-container: #0a2e14;
  --on-secondary: #f8fff4;
  --on-secondary-container: #1e2e0a;
  --on-tertiary: #f4fff8;
  --on-tertiary-container: #0e2e22;
  --inverse-primary: #88d4a0;

  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(46, 107, 58, 0.12), rgba(34, 84, 46, 0.05));
}

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

@media (prefers-color-scheme: dark) {
  :root {
    --surface-tint: #88d4a0;
    --primary: #88d4a0;
    --primary-dim: #60b87c;
    --primary-container: #0e4820;
    --secondary: #a8c878;
    --secondary-dim: #88a858;
    --secondary-container: #284800;
    --tertiary: #80c8a8;
    --tertiary-dim: #60a888;
    --tertiary-container: #0e4830;
    --on-primary: #0a2e14;
    --on-primary-container: #b8eecc;
    --on-secondary: #1e2e0a;
    --on-secondary-container: #d8f0b8;
    --on-tertiary: #0e2e22;
    --on-tertiary-container: #b8eecc;
    --inverse-primary: #2e6b3a;
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
    --gradient-hero: linear-gradient(135deg, rgba(136, 212, 160, 0.14), rgba(96, 184, 124, 0.06));
  }
}

html.dark-mode {
  --surface-tint: #88d4a0;
  --primary: #88d4a0;
  --primary-dim: #60b87c;
  --primary-container: #0e4820;
  --secondary: #a8c878;
  --secondary-dim: #88a858;
  --secondary-container: #284800;
  --tertiary: #80c8a8;
  --tertiary-dim: #60a888;
  --tertiary-container: #0e4830;
  --on-primary: #0a2e14;
  --on-primary-container: #b8eecc;
  --on-secondary: #1e2e0a;
  --on-secondary-container: #d8f0b8;
  --on-tertiary: #0e2e22;
  --on-tertiary-container: #b8eecc;
  --inverse-primary: #2e6b3a;
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(136, 212, 160, 0.14), rgba(96, 184, 124, 0.06));
}

html.dark-mode body {
  background: linear-gradient(135deg, rgba(14, 72, 32, 0.28), rgba(40, 72, 0, 0.14)), var(--surface);
}