:root {
  --surface-tint: #8f5e1a;

  --primary: #8f5e1a;
  --primary-dim: #724a12;
  --primary-container: #f5deb8;
  --secondary: #7a6e3a;
  --secondary-dim: #615729;
  --secondary-container: #ede8c4;
  --tertiary: #6b4a2e;
  --tertiary-dim: #543a22;
  --tertiary-container: #edd9c4;

  --on-primary: #fff8f0;
  --on-primary-container: #3d2700;
  --on-secondary: #fafaf0;
  --on-secondary-container: #302800;
  --on-tertiary: #fff8f2;
  --on-tertiary-container: #2c1800;
  --inverse-primary: #f0c87a;

  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(143, 94, 26, 0.12), rgba(114, 74, 18, 0.05));
}

body {
  background: linear-gradient(135deg, rgba(143, 94, 26, 0.07), rgba(122, 110, 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(143, 94, 26, 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(143, 94, 26, 0.16);
  color: var(--on-surface);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-tint: #f0c87a;
    --primary: #f0c87a;
    --primary-dim: #d4a84e;
    --primary-container: #6e4500;
    --secondary: #d4cc82;
    --secondary-dim: #b8b060;
    --secondary-container: #504800;
    --tertiary: #e8be96;
    --tertiary-dim: #cc9e72;
    --tertiary-container: #522e00;
    --on-primary: #3d2700;
    --on-primary-container: #ffe8b8;
    --on-secondary: #302800;
    --on-secondary-container: #f0ecb8;
    --on-tertiary: #2c1800;
    --on-tertiary-container: #ffdfb8;
    --inverse-primary: #8f5e1a;
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
    --gradient-hero: linear-gradient(135deg, rgba(240, 200, 122, 0.14), rgba(212, 168, 78, 0.06));
  }
}

html.dark-mode {
  --surface-tint: #f0c87a;
  --primary: #f0c87a;
  --primary-dim: #d4a84e;
  --primary-container: #6e4500;
  --secondary: #d4cc82;
  --secondary-dim: #b8b060;
  --secondary-container: #504800;
  --tertiary: #e8be96;
  --tertiary-dim: #cc9e72;
  --tertiary-container: #522e00;
  --on-primary: #3d2700;
  --on-primary-container: #ffe8b8;
  --on-secondary: #302800;
  --on-secondary-container: #f0ecb8;
  --on-tertiary: #2c1800;
  --on-tertiary-container: #ffdfb8;
  --inverse-primary: #8f5e1a;
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(240, 200, 122, 0.14), rgba(212, 168, 78, 0.06));
}

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