:root {
  --surface-tint: #3a6b52;

  --primary: #3a6b52;
  --primary-dim: #2c5440;
  --primary-container: #c4e8d4;
  --secondary: #4a6472;
  --secondary-dim: #395060;
  --secondary-container: #c8dce8;
  --tertiary: #5a6b42;
  --tertiary-dim: #475634;
  --tertiary-container: #d4e8c0;

  --on-primary: #f4fbf7;
  --on-primary-container: #0d2e1e;
  --on-secondary: #f2f8fb;
  --on-secondary-container: #0e2430;
  --on-tertiary: #f6fbf2;
  --on-tertiary-container: #1e2c10;
  --inverse-primary: #8ecfaa;

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

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

@media (prefers-color-scheme: dark) {
  :root {
    --surface-tint: #8ecfaa;
    --primary: #8ecfaa;
    --primary-dim: #66b086;
    --primary-container: #1e4f34;
    --secondary: #8ab8cc;
    --secondary-dim: #629ab2;
    --secondary-container: #1e3e50;
    --tertiary: #a8c882;
    --tertiary-dim: #86a860;
    --tertiary-container: #2c4418;
    --on-primary: #0d2e1e;
    --on-primary-container: #c4f0d8;
    --on-secondary: #0e2430;
    --on-secondary-container: #c4e4f4;
    --on-tertiary: #1e2c10;
    --on-tertiary-container: #cceeb8;
    --inverse-primary: #3a6b52;
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
    --gradient-hero: linear-gradient(135deg, rgba(142, 207, 170, 0.14), rgba(102, 176, 134, 0.06));
  }
}

html.dark-mode {
  --surface-tint: #8ecfaa;
  --primary: #8ecfaa;
  --primary-dim: #66b086;
  --primary-container: #1e4f34;
  --secondary: #8ab8cc;
  --secondary-dim: #629ab2;
  --secondary-container: #1e3e50;
  --tertiary: #a8c882;
  --tertiary-dim: #86a860;
  --tertiary-container: #2c4418;
  --on-primary: #0d2e1e;
  --on-primary-container: #c4f0d8;
  --on-secondary: #0e2430;
  --on-secondary-container: #c4e4f4;
  --on-tertiary: #1e2c10;
  --on-tertiary-container: #cceeb8;
  --inverse-primary: #3a6b52;
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(142, 207, 170, 0.14), rgba(102, 176, 134, 0.06));
}

html.dark-mode body {
  background: linear-gradient(135deg, rgba(30, 79, 52, 0.28), rgba(30, 62, 80, 0.14)), var(--surface);
}