/* Section-specific theme for /ai-for-ideell pages */
:root {
  --surface-tint: #4a7c59;

  --primary: #4a7c59;
  --primary-dim: #3a6348;
  --primary-container: #cce8d4;
  --secondary: #6b7d6b;
  --secondary-dim: #556356;
  --secondary-container: #d9e7db;
  --tertiary: #6b7a4f;
  --tertiary-dim: #566240;
  --tertiary-container: #e4ecd1;

  --on-primary: #f4fef6;
  --on-primary-container: #2c5038;
  --on-secondary: #f5faf5;
  --on-secondary-container: #394d3a;
  --on-tertiary: #f6fbe9;
  --on-tertiary-container: #3f4d2c;
  --inverse-primary: #aad8b4;

  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(74, 124, 89, 0.14), rgba(58, 99, 72, 0.05));
}

body {
  background: linear-gradient(135deg, rgba(74, 124, 89, 0.08), rgba(107, 122, 79, 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(74, 124, 89, 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(74, 124, 89, 0.18);
  color: var(--on-surface);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-tint: #aad8b4;

    --primary: #aad8b4;
    --primary-dim: #85bd93;
    --primary-container: #305a3c;
    --secondary: #bccfbc;
    --secondary-dim: #98ae9a;
    --secondary-container: #495a4b;
    --tertiary: #c5d4a1;
    --tertiary-dim: #a4b27f;
    --tertiary-container: #4e5d34;

    --on-primary: #0e3520;
    --on-primary-container: #d4f0da;
    --on-secondary: #263828;
    --on-secondary-container: #d4e6d5;
    --on-tertiary: #273514;
    --on-tertiary-container: #e0efbb;
    --inverse-primary: #4a7c59;

    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
    --gradient-hero: linear-gradient(135deg, rgba(170, 216, 180, 0.15), rgba(133, 189, 147, 0.05));
  }
}

html.dark-mode {
  --surface-tint: #aad8b4;

  --primary: #aad8b4;
  --primary-dim: #85bd93;
  --primary-container: #305a3c;
  --secondary: #bccfbc;
  --secondary-dim: #98ae9a;
  --secondary-container: #495a4b;
  --tertiary: #c5d4a1;
  --tertiary-dim: #a4b27f;
  --tertiary-container: #4e5d34;

  --on-primary: #0e3520;
  --on-primary-container: #d4f0da;
  --on-secondary: #263828;
  --on-secondary-container: #d4e6d5;
  --on-tertiary: #273514;
  --on-tertiary-container: #e0efbb;
  --inverse-primary: #4a7c59;

  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(170, 216, 180, 0.15), rgba(133, 189, 147, 0.05));
}

html.dark-mode body {
  background: linear-gradient(135deg, rgba(48, 90, 60, 0.26), rgba(78, 93, 52, 0.14)), var(--surface);
}