@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-VariableFont_wght.woff2") format("woff2 supports variations"),
    url("/fonts/Montserrat-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

[data-theme="light"] {
  /* Primary Colors */
  --primary: #4a8c3d;
  --primary-hover: #3a7530;
  --secondary: #63b853;
  --accent: #7aeb5f;

  /* Neutrals */
  --background: var(--off-white);
  --surface: var(--true-white);
  --text: var(--dark-neutral);
  --text-muted: #3d3d3d;

  /* Accents */
  --highlight: #ff7f50;
  --highlight-hover: #ff6b3b;

  /* Supporting */
  --success: #4a8c3d;
  --warning: #ffd700;
  --error: #ff4444;
  --info: #4299e1;

  /* Theme-specific vars */
  --shadow-color: 0deg 0% 50%;
  --shadow-elevation-low:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
    1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
}

[data-theme="dark"] {
  /* Primary Colors */
  --primary: #63b853;
  --primary-hover: #7aeb5f;
  --secondary: #4a8c3d;
  --accent: #63b853;

  /* Neutrals */
  --background: #121212;
  --surface: #2a2a2a;
  --text: #e0e0e0;
  --text-muted: #b0b0b0;

  /* Accents */
  --highlight: #ff9f7f;
  --highlight-hover: #ffb08f;

  /* Supporting */
  --success: #63b853;
  --warning: #ffe44d;
  --error: #ff6666;
  --info: #5eb3f6;

  /* Theme-specific vars */
  --shadow-color: 0deg 0% 5%;
  --shadow-elevation-low:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
    1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
}

/* System Preferences Fallback */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* Base Theme Variables */
:root {
  /* Original Color Variables */
  --primary-green: #4a8c3d;
  --secondary-green: #63b853;
  --accent-green: #7aeb5f;
  --true-white: #fff;
  --off-white: #f5f5f5;
  --dark-neutral: #1a1a1a;
  --warm-accent: #ff7f50;
  --dark-green: #073300;
  --light-green: #e9f7e5;

  /* Transitions */
  --transition-speed: 0.2s;
  --transition-easing: ease-in-out;
}

/* Base Styles */
html {
  color-scheme: light dark;
}

body {
  transition: background-color var(--transition-speed) var(--transition-easing);
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* Theme Toggle Styles */
[data-theme] {
  background-color: var(--background);
  color: var(--accent);
}