/* Pine green, sunflower yellow, and warm off-white.
   Shared by the React app and static articles. Both modes retain the brand;
   dark mode uses deeper pine surfaces. */
:root {
  --background: #183F36;
  --foreground: #F5F1E7;
  --card: #224C41;
  --card-foreground: #F5F1E7;
  --popover: #224C41;
  --popover-foreground: #F5F1E7;
  --primary: #F0D45A;
  --primary-foreground: #183F36;
  --primary-hover: #F6DF7D;
  --secondary: #2C584B;
  --secondary-foreground: #F5F1E7;
  --muted: #264D42;
  --muted-foreground: #C3CDC0;
  --accent: #315747;
  --accent-foreground: #F5F1E7;
  --destructive: #FFB4A2;
  --border: #527266;
  --input: #527266;
  --ring: #F0D45A;
  --chart-1: #F5F1E7;
  --chart-2: #F0D45A;
  --chart-3: #D8BE4B;
  --chart-4: #A8C6AC;
  --chart-5: #739A80;
  --radius: 0.625rem;
  --sidebar: #1C443A;
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--accent);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
  --surface: var(--card);
  --surface-2: var(--muted);
  --link: var(--primary);
  --logo: var(--primary);
}

.dark {
  --background: #102D27;
  --card: #193C33;
  --popover: #193C33;
  --secondary: #234A3E;
  --muted: #1D4137;
  --accent: #2C5546;
  --border: #466457;
  --input: #466457;
  --sidebar: #15362E;
}