/* =====================================================================
   base.css — colours, reset and basic layout for every page.
   Dark mode: the .dark-mode class goes on <html> (js/theme-init.js).
   ===================================================================== */

:root {
  --primary-color: #2e7d32;
  --primary-light: #4caf50;
  --primary-dark: #1b5e20;
  --secondary-color: #ff9800;
  --secondary-dark: #e68900;
  --accent-color: #2196f3;
  --accent-dark: #1565c0;

  --text-color: #333333;
  --muted-text: #666666;

  --light-bg: #f5f5f5;        /* page background */
  --white: #ffffff;           /* section background */
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --border-color: #e1e5e8;
  --header-bg: #ffffff;

  --footer-bg: #1a1a1a;
  --footer-text: #ffffff;

  --error: #d32f2f;
  --error-bg: #ffebee;
  --success: #2e7d32;
  --success-bg: #e8f5e9;
  --warning-bg: #fff3e0;
  --warning-text: #b45309;

  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --radius: 8px;
  --hero-gradient: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
}

.dark-mode {
  --primary-color: #4caf50;
  --primary-light: #66bb6a;
  --primary-dark: #388e3c;
  --secondary-color: #ffb74d;
  --accent-color: #64b5f6;

  --text-color: #e0e0e0;
  --muted-text: #bbbbbb;

  --light-bg: #121212;
  --white: #1e1e1e;
  --card-bg: #2d2d2d;
  --input-bg: #292929;
  --border-color: #444444;
  --header-bg: #1e1e1e;

  --footer-bg: #0a0a0a;
  --footer-text: #e0e0e0;

  --error: #ff6b6b;
  --error-bg: #4a1f1f;
  --success: #66bb6a;
  --success-bg: #1e3a2e;
  --warning-bg: #4a3410;
  --warning-text: #ffcc80;

  --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  --hero-gradient: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

html { scroll-padding-top: 90px; }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--light-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

a { text-decoration: none; color: inherit; }

img { max-width: 100%; }

button, input, select, textarea { font-family: inherit; }

.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.container-narrow { max-width: 900px; }

section { padding: 60px 0; }

h1, h2, h3, h4 { margin-bottom: 1rem; line-height: 1.2; }

.hidden { display: none !important; }

.muted { color: var(--muted-text); }

/* Accessibility: "Skip to main content" link, visible when tabbed to */
.skip-link { position: absolute; top: -100px; left: 0; background: var(--primary-color); color: #fff; padding: 8px; z-index: 1000; }
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}