/* ==========================================================================
   variables.css
   Design tokens. Typography scale, radii and shadows are tuned to match
   the Mantis Bootstrap admin template (https://mantisdashboard.com) while
   keeping Kiens' green brand palette. Everything reads through CSS custom
   properties so #theme-toggle:checked ~ .app-wrapper can swap the whole
   surface/text palette for dark mode without touching component CSS.
   ========================================================================== */
:root {
  /* Brand green scale (kept identical in both themes) */
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --green-950: #052e16;

  /* Surfaces - Light mode */
  --bg-body: #f4f7f6;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f3f5f4;
  --text-primary: #1d2129;
  --text-secondary: #667085;
  --border-color: #e6ebe8;

  /* Sidebar - Light Mode: clean white sidebar, Mantis-style */
  --sidebar-bg: #ffffff;
  --sidebar-text: #4b5768;
  --sidebar-text-active: #15803d;
  --sidebar-active: #edf9f1;
  --sidebar-hover: #f3f7f4;
  --sidebar-border: #e6ebe8;

  /* Fixed brand tone - always dark green, independent of light/dark theme.
     Used by the login brand panel and the member e-card so they never
     become illegible when the surrounding theme switches. */
  --brand-panel-from: #052e16;
  --brand-panel-via: #14532d;
  --brand-panel-to: #166534;

  /* Elevation - Mantis uses soft, low-contrast shadows rather than a
     colored "glow"; keep a thin green glow only for interactive/primary
     elements (buttons, focus rings) */
  --shadow-card: 0 1px 2px rgba(20, 40, 30, 0.04), 0 8px 20px -6px rgba(20, 40, 30, 0.08);
  --shadow-card-hover: 0 4px 10px rgba(20, 40, 30, 0.06), 0 14px 28px -8px rgba(20, 40, 30, 0.12);
  --glow-button: 0 4px 12px 0 rgba(22, 163, 74, 0.35);
  --glow-card: var(--shadow-card);
  --glow-primary: 0 4px 12px 0 rgba(22, 163, 74, 0.35);

  --header-bg: rgba(255, 255, 255, 0.92);
  --hero-gradient: linear-gradient(135deg, rgba(22, 163, 74, 0.2) 0%, rgba(20, 83, 45, 0.4) 100%);

  /* Radius scale - Mantis cards/inputs read a touch more rounded than
     stock Bootstrap */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Typography - Mantis default is Public Sans at a 14px base, with a
     slightly tighter type scale than Bootstrap's default 16px */
  --font-family: 'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-base: 0.875rem;
  --font-size-sm: 0.8125rem;
  --font-size-lg: 1rem;
  --line-height-base: 1.57;


  --hyper-link: blue;
}

#theme-toggle:checked ~ .app-wrapper {
  --bg-body: #0b1712;
  --bg-surface: #10201a;
  --bg-surface-hover: #172a22;
  --text-primary: #f4f7f5;
  --text-secondary: #93a29a;
  --border-color: #21362c;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 24px -8px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 4px 10px rgba(0, 0, 0, 0.25), 0 16px 32px -8px rgba(0, 0, 0, 0.5);
  --glow-card: var(--shadow-card);
  --header-bg: rgba(16, 26, 22, 0.92);
  --hero-gradient: linear-gradient(135deg, rgba(22, 163, 74, 0.3) 0%, rgba(5, 46, 22, 0.6) 100%);

  /* Sidebar - Dark Mode: restore the dark green sidebar */
  --sidebar-bg: #041208;
  --sidebar-text: #bbf7d0;
  --sidebar-text-active: #ffffff;
  --sidebar-active: #15803d;
  --sidebar-hover: #166534;
  --sidebar-border: #1f3d29;


  --hyper-link: yellow;
}