/**
 * Common Theme and Color System for EquitySense
 * Unified color palette for all pages - Dark and Light theme support
 * Primary Color: Theme-aware (lighter in dark mode, darker in light mode)
 */

/* ============================================================================
   DARK THEME (Default)
   ============================================================================ */
/* Core additional variables for typography and layout */
:root {
  /* Typography - inherit from common.css */
  --font-heading: var(--font-heading);
  --font-body: var(--font-primary);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Borders */
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-width: 1200px;
  --header-height: 70px;
}

:root,
:root[data-theme="dark"] {
  /* Primary Color Scale - Sophisticated green for trust & calm reading */
  --primary: #10b981;
  --primary-light: #1de9b6;
  --primary-dark: #047857;
  --primary-50: #051d1c;
  --primary-100: #0e4b45;
  --primary-200: #16a34a;
  --primary-300: #1de9b6;
  --primary-400: #34d399;
  --primary-500: #6ee7b7;
  --primary-600: #a7f3d0;
  --primary-700: #d1fae5;
  --primary-800: #e0f2fe;
  --primary-900: #f0fdfa;

  /* Secondary Colors - Deep slate for reduced eye strain */
  --secondary: #0f172a;
  --secondary-light: #1e293b;
  --secondary-dark: rgba(15, 23, 42, 0.95);
  --secondary-color: #1e293b;

  /* Text Colors - Light gray avoids glare, better for long reading */
  --text-primary: #e2e8f0;
  --text-light: #e2e8f0;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dark: #0f172a;

  /* Font Families */
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-secondary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  /* Background Colors - Reading-optimized palette */
  --bg-primary: #1a202c;
  --bg-secondary: #0f172a;
  --bg-tertiary: #1e293b;
  --card-bg: #1a202c;

  /* Gray/Neutral Color Scale - Slate based for consistency */
  --gray-50: #0f172a;
  --gray-100: #1a202c;
  --gray-200: #1e293b;
  --gray-300: #334155;
  --gray-400: #475569;
  --gray-500: #64748b;
  --gray-600: #cbd5e1;
  --gray-700: #e2e8f0;
  --gray-800: #f1f5f9;
  --gray-900: #f8fafc;

  --neutral-50: #0f172a;
  --neutral-100: #1a202c;
  --neutral-200: #1e293b;
  --neutral-300: #334155;
  --neutral-400: #475569;
  --neutral-500: #64748b;
  --neutral-600: #cbd5e1;
  --neutral-700: #e2e8f0;
  --neutral-800: #f1f5f9;
  --neutral-900: #f8fafc;

  /* Borders & Dividers - Subtle for clean look */
  --border-color: rgba(226, 232, 240, 0.08);
  --border-light: rgba(226, 232, 240, 0.05);
  --border-accent: rgba(226, 232, 240, 0.1);
  --border-hover: rgba(226, 232, 240, 0.15);
  --border-active: rgba(226, 232, 240, 0.2);

  /* Semantic Colors */
  --success: #10b981;
  --success-50: #14532d;
  --success-100: #166534;
  --success-200: #15803d;
  --success-500: #4ade80;
  --success-600: #86efac;

  --warning: #f59e0b;
  --warning-50: #78350f;
  --warning-100: #92400e;
  --warning-200: #d97706;
  --warning-500: #f59e0b;
  --warning-600: #fef3c7;

  --error: #ef4444;
  --error-50: #7f1d1d;
  --error-100: #991b1b;
  --error-200: #dc2626;
  --error-500: #ef4444;
  --error-600: #fecaca;
  --error-light: #fecaca;
  --error-dark: #dc2626;

  --info: #0284c7;
  --danger: #ef4444;

  /* Special Risk/Red-Flag Colors */
  --risk-red: #dc2626;
  --risk-red-light: #fee2e2;
  --caution-amber: #d97706;
  --caution-amber-light: #fef3c7;
  --clean-green: #059669;
  --clean-green-light: #d1fae5;

  /* Event Type Colors */
  --event-results: #10b981;
  --event-results-dark: #059669;
  --event-results-text: #000;
  --event-concall: #0ea5e9;
  --event-concall-dark: #0284c7;
  --event-concall-text: #000;
  --event-agm: #f59e0b;
  --event-agm-dark: #d97706;
  --event-agm-text: #000;
  --event-dividend: #ef4444;
  --event-dividend-dark: #dc2626;
  --event-dividend-text: #fff;
  --event-other: #8b5cf6;
  --event-other-dark: #7c3aed;
  --event-other-text: #fff;
  --event-result: #10b981;
  --event-result-dark: #059669;
  --event-result-text: #000;
  --event-earnings-concall: #0ea5e9;
  --event-earnings-concall-dark: #0284c7;
  --event-earnings-concall-text: #000;
  --event-analyst-meeting: #06b6d4;
  --event-analyst-meeting-dark: #0891b2;
  --event-analyst-meeting-text: #000;
  --event-boardmeeting: #8b5cf6;
  --event-boardmeeting-dark: #7c3aed;
  --event-boardmeeting-text: #fff;
  --event-egm: #f97316;
  --event-egm-dark: #ea580c;
  --event-egm-text: #000;
  --event-buyback: #ec4899;
  --event-buyback-dark: #db2777;
  --event-buyback-text: #fff;
  --event-sharesplit: #d946ef;
  --event-sharesplit-dark: #c026d3;
  --event-sharesplit-text: #fff;

  /* Overlay */
  --overlay-dark: rgba(0, 0, 0, 0.7);
  --overlay-light: rgba(0, 0, 0, 0.2);

  /* Button colors */
  --button-bg-hover: rgba(16, 185, 129, 0.12);
  --button-border-active: rgba(16, 185, 129, 0.25);
  --button-bg-active: rgba(16, 185, 129, 0.15);
  --button-text-color: #e2e8f0;
  --button-shadow-hover: 0 2px 8px rgba(16, 185, 129, 0.2);
  --button-shadow-active: 0 1px 4px rgba(16, 185, 129, 0.15);
  --button-transition: all 0.2s ease;

  /* Filter popup */
  --popup-bg: rgba(15, 23, 42, 0.98);
  --filter-btn-bg: transparent;
  --filter-btn-hover-bg: rgba(226, 232, 240, 0.08);

  /* Input & Form */
  --form-bg: #1e293b;
  --form-border: rgba(226, 232, 240, 0.1);
  --form-focus-border: #10b981;
  --form-focus-shadow: rgba(16, 185, 129, 0.2);
  --form-placeholder: #94a3b8;

  /* Gradient & Shadows */
  --primary-gradient: linear-gradient(90deg, #10b981 0%, #1de9b6 100%);
  --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
    0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2);

  /* Badge & Badge Colors */
  --badge-bg: rgba(16, 185, 129, 0.2);
  --badge-border: rgba(16, 185, 129, 0.6);
  --badge-text: #dcfce7;
  --badge-expired-bg: rgba(239, 68, 68, 0.2);
  --badge-expired-border: rgba(239, 68, 68, 0.6);
  --badge-expired-text: #fee2e2;
  --badge-pending-bg: rgba(251, 146, 60, 0.2);
  --badge-pending-border: rgba(251, 146, 60, 0.6);
  --badge-pending-text: #fed7aa;

  /* Hero Badge */
  --hero-badge-bg: rgba(0, 200, 83, 0.1);
  --hero-badge-border: rgba(0, 200, 83, 0.2);
  --hero-badge-shadow: rgba(0, 200, 83, 0.1);

  /* Accent Colors */
  --accent-black: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
  --accent-black-light: #4b5563;
  --accent-black-solid: #2a2a2a;
  --sage-green: #4ade80;
  --sage-green-50: #166534;
  --sage-green-100: #15803d;
  --sage-green-200: #16a34a;
  --card-green: #4ade80;
  --card-green-light: #166534;
}

/* ============================================================================
   LIGHT THEME
   ============================================================================ */
:root[data-theme="light"] {
  /* Primary Color Scale - Sophisticated green for readability & trust */
  --primary: #059669;
  --primary-light: #10b981;
  --primary-dark: #047857;
  --primary-50: #f0fdfa;
  --primary-100: #d1fae5;
  --primary-200: #a7f3d0;
  --primary-300: #6ee7b7;
  --primary-400: #34d399;
  --primary-500: #1de9b6;
  --primary-600: #10b981;
  --primary-700: #059669;
  --primary-800: #047857;
  --primary-900: #065f46;

  /* Secondary Colors - Clean off-white for reading */
  --secondary: #f8f9fa;
  --secondary-light: #ffffff;
  --secondary-dark: #f1f5f9;
  --secondary-color: #334155;

  /* Text Colors - Optimized for reading (dark gray, not black) */
  --text-primary: #1f2937;
  --text-light: #1f2937;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-dark: #111827;

  /* Font Families */
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  /* Background Colors - Reading-optimized off-white palette */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #f1f5f9;
  --card-bg: #ffffff;

  /* Gray/Neutral Color Scale - Slate-based for consistency & cleanliness */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  /* Borders & Dividers - Minimal, clean borders */
  --border-color: rgba(0, 0, 0, 0.08);
  --border-light: rgba(0, 0, 0, 0.05);
  --border-accent: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 0, 0, 0.12);
  --border-active: rgba(0, 0, 0, 0.15);

  /* Semantic Colors */
  --success: #16a34a;
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-200: #bbf7d0;
  --success-500: #22c55e;
  --success-600: #16a34a;

  --warning: #d97706;
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-500: #f59e0b;
  --warning-600: #d97706;

  --error: #dc2626;
  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-200: #fecaca;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-light: #fee2e2;
  --error-dark: #991b1b;

  --info: #0284c7;
  --danger: #ef4444;

  /* Special Risk/Red-Flag Colors */
  --risk-red: #dc2626;
  --risk-red-light: #fee2e2;
  --caution-amber: #d97706;
  --caution-amber-light: #fef3c7;
  --clean-green: #059669;
  --clean-green-light: #d1fae5;

  /* Event Type Colors - Vibrant, readable in light mode */
  --event-results: #16a34a;
  --event-results-dark: #15803d;
  --event-results-text: #fff;
  --event-concall: #0284c7;
  --event-concall-dark: #1e40af;
  --event-concall-text: #fff;
  --event-agm: #d97706;
  --event-agm-dark: #92400e;
  --event-agm-text: #fff;
  --event-dividend: #dc2626;
  --event-dividend-dark: #991b1b;
  --event-dividend-text: #fff;
  --event-other: #7c3aed;
  --event-other-dark: #5b21b6;
  --event-other-text: #fff;
  --event-result: #16a34a;
  --event-result-dark: #15803d;
  --event-result-text: #fff;
  --event-earnings-concall: #0284c7;
  --event-earnings-concall-dark: #1e40af;
  --event-earnings-concall-text: #fff;
  --event-analyst-meeting: #0891b2;
  --event-analyst-meeting-dark: #155e75;
  --event-analyst-meeting-text: #fff;
  --event-boardmeeting: #7c3aed;
  --event-boardmeeting-dark: #5b21b6;
  --event-boardmeeting-text: #fff;
  --event-egm: #ea580c;
  --event-egm-dark: #c2410c;
  --event-egm-text: #fff;
  --event-buyback: #db2777;
  --event-buyback-dark: #a01251;
  --event-buyback-text: #fff;
  --event-sharesplit: #c026d3;
  --event-sharesplit-dark: #87114e;
  --event-sharesplit-text: #fff;

  /* Overlay */
  --overlay-dark: rgba(0, 0, 0, 0.4);
  --overlay-light: rgba(0, 0, 0, 0.05);

  /* Button colors */
  --button-bg-hover: rgba(5, 150, 105, 0.08);
  --button-border-active: rgba(5, 150, 105, 0.25);
  --button-bg-active: rgba(5, 150, 105, 0.1);
  --button-text-color: #1f2937;
  --button-shadow-hover: 0 2px 8px rgba(5, 150, 105, 0.1);
  --button-shadow-active: 0 1px 4px rgba(5, 150, 105, 0.08);
  --button-transition: all 0.2s ease;

  /* Filter popup */
  --popup-bg: rgba(255, 255, 255, 0.98);
  --filter-btn-bg: transparent;
  --filter-btn-hover-bg: rgba(0, 0, 0, 0.04);

  /* Input & Form */
  --form-bg: #f8f9fa;
  --form-border: rgba(0, 0, 0, 0.1);
  --form-focus-border: #059669;
  --form-focus-shadow: rgba(5, 150, 105, 0.12);
  --form-placeholder: #9ca3af;

  /* Gradient & Shadows - Clean, minimal for light mode reading */
  --primary-gradient: linear-gradient(90deg, #059669 0%, #10b981 100%);
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08),
    0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
    0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Badge & Badge Colors - Light mode versions */
  --badge-bg: rgba(22, 163, 74, 0.12);
  --badge-border: rgba(22, 163, 74, 0.3);
  --badge-text: #15803d;
  --badge-expired-bg: rgba(220, 38, 38, 0.12);
  --badge-expired-border: rgba(220, 38, 38, 0.3);
  --badge-expired-text: #991b1b;
  --badge-pending-bg: rgba(217, 119, 6, 0.12);
  --badge-pending-border: rgba(217, 119, 6, 0.3);
  --badge-pending-text: #92400e;

  /* Hero Badge */
  --hero-badge-bg: rgba(0, 150, 64, 0.08);
  --hero-badge-border: rgba(0, 150, 64, 0.2);
  --hero-badge-shadow: rgba(0, 150, 64, 0.05);

  /* Accent Colors */
  --accent-black: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  --accent-black-light: #f3f4f6;
  --accent-black-solid: #374151;
  --sage-green: #16a34a;
  --sage-green-50: #f0fdf4;
  --sage-green-100: #dcfce7;
  --sage-green-200: #bbf7d0;
  --card-green: #16a34a;
  --card-green-light: #f0fdf4;
}

/* ============================================================================
   SHARED STYLES & UTILITIES
   ============================================================================ */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-primary);
  background-color: var(--secondary-dark) !important;
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Event Type Utility Classes */
.event-type-badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.event-badge-results {
  background-color: var(--event-results);
}

.event-badge-concall {
  background-color: var(--event-concall);
}

.event-badge-agm {
  background-color: var(--event-agm);
}

.event-badge-dividend {
  background-color: var(--event-dividend);
}

.event-badge-other {
  background-color: var(--event-other);
}

/* Event Type Button Classes */
.event-btn-results {
  background-color: var(--event-results);
  color: #000;
}

.event-btn-results:hover {
  background-color: var(--event-results-dark);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.event-btn-concall {
  background-color: var(--event-concall);
  color: #000;
}

.event-btn-concall:hover {
  background-color: var(--event-concall-dark);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
}

.event-btn-agm {
  background-color: var(--event-agm);
  color: #000;
}

.event-btn-agm:hover {
  background-color: var(--event-agm-dark);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.event-btn-dividend {
  background-color: var(--event-dividend);
  color: #fff;
}

.event-btn-dividend:hover {
  background-color: var(--event-dividend-dark);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.event-btn-other {
  background-color: var(--event-other);
  color: #fff;
}

.event-btn-other:hover {
  background-color: var(--event-other-dark);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

/* Popup Event Type Badge Styles */
.popup-event-type {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85em;
  margin-bottom: 16px;
}

.popup-event-type.RESULTS {
  background-color: var(--event-results);
  color: #000;
}

.popup-event-type.RESULT {
  background-color: var(--event-result);
  color: #000;
}

.popup-event-type.CONCALL {
  background-color: var(--event-concall);
  color: #000;
}

.popup-event-type.EARNINGS_CONCALL {
  background-color: var(--event-earnings-concall);
  color: #000;
}

.popup-event-type.ANALYST_MEETING {
  background-color: var(--event-analyst-meeting);
  color: #000;
}

.popup-event-type.BOARDMEETING {
  background-color: var(--event-boardmeeting);
  color: #fff;
}

.popup-event-type.AGM {
  background-color: var(--event-agm);
  color: #000;
}

.popup-event-type.EGM {
  background-color: var(--event-egm);
  color: #000;
}

.popup-event-type.DIVIDEND {
  background-color: var(--event-dividend);
  color: #fff;
}

.popup-event-type.BUYBACK {
  background-color: var(--event-buyback);
  color: #fff;
}

.popup-event-type.SHARESPLIT {
  background-color: var(--event-sharesplit);
  color: #fff;
}

.popup-event-type.OTHER {
  background-color: var(--event-other);
  color: #fff;
}

/* Calendar Event Badge Styles */
.calendar-event {
  background-color: var(--event-results);
  color: #000;
}

.calendar-event.RESULTS {
  background-color: var(--event-results);
}

.calendar-event.RESULTS:hover {
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.calendar-event.RESULT {
  background-color: var(--event-result);
}

.calendar-event.RESULT:hover {
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.calendar-event.CONCALL {
  background-color: var(--event-concall);
}

.calendar-event.CONCALL:hover {
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
}

.calendar-event.EARNINGS_CONCALL {
  background-color: var(--event-earnings-concall);
}

.calendar-event.EARNINGS_CONCALL:hover {
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
}

.calendar-event.ANALYST_MEETING {
  background-color: var(--event-analyst-meeting);
}

.calendar-event.ANALYST_MEETING:hover {
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4);
}

.calendar-event.BOARDMEETING {
  background-color: var(--event-boardmeeting);
}

.calendar-event.BOARDMEETING:hover {
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.calendar-event.AGM {
  background-color: var(--event-agm);
}

.calendar-event.AGM:hover {
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.calendar-event.EGM {
  background-color: var(--event-egm);
}

.calendar-event.EGM:hover {
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
}

.calendar-event.DIVIDEND {
  background-color: var(--event-dividend);
}

.calendar-event.DIVIDEND:hover {
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.calendar-event.BUYBACK {
  background-color: var(--event-buyback);
}

.calendar-event.BUYBACK:hover {
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4);
}

.calendar-event.SHARESPLIT {
  background-color: var(--event-sharesplit);
}

.calendar-event.SHARESPLIT:hover {
  box-shadow: 0 2px 8px rgba(217, 70, 239, 0.4);
}

.calendar-event.OTHER {
  background-color: var(--event-other);
}

.calendar-event.OTHER:hover {
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
  transform: translateY(-1px);
  z-index: 2;
}

/* ============================================================================
   BUTTON COMPONENT SYSTEM - Theme-Aware
   ============================================================================
   
   STANDARDIZED BUTTON SYSTEM FOR EQUITYSENSE
   
   All buttons automatically adapt to light and dark themes using CSS variables.
   
   BUTTON TYPES:
   - .btn-primary: Main call-to-action (green highlight)
   - .btn-secondary: Alternative action (neutral background)
   - .btn-danger: Destructive actions (red background)
   - .btn-success: Positive/confirmative actions (green)
   - .btn-outline: Secondary emphasis (transparent with border)
   - .btn-ghost: Minimal style (transparent with subtle border)
   - .btn-link: Text-only button (no background)
   
   SIZE VARIANTS:
   - .btn-sm: Small buttons (6px 12px padding)
   - .btn-md: Default size (8px 16px padding) - default when no size specified
   - .btn-lg: Large buttons (10px 20px padding)
   - .btn-xl: Extra large (12px 24px padding)
   
   WIDTH VARIANTS:
   - .btn-full / .btn-block: Full width button
   
   ICON VARIANTS:
   - .btn-icon: Square icon button (40px x 40px)
   - .btn-icon-sm: Small icon button (32px x 32px)
   - .btn-icon-lg: Large icon button (48px x 48px)
   
   EXAMPLE USAGE:
   <button class="btn btn-primary btn-lg">Primary Action</button>
   <button class="btn btn-secondary btn-sm">Secondary</button>
   <a class="btn btn-outline btn-full">Full Width Link</a>
   <button class="btn btn-icon btn-primary"><i class="icon"></i></button>
   
   STATES:
   All buttons include support for:
   - :hover - Enhanced visual feedback
   - :active - Pressed state
   - :disabled - Disabled state (reduced opacity)
   - :focus - Keyboard focus indicator
   
   THEME SUPPORT:
   Buttons automatically switch colors and shadows between light/dark modes
   using variables: --primary, --text-dark, --error, --border-color, etc.
   ============================================================================ */

/* Base Button Styles - Unified */
.btn,
button {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:focus,
button:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Button Size Variants - Consistent Sizing */
.btn-sm {
  padding: 6px 12px;
  font-size: 0.75rem;
  border-radius: var(--radius-md);
}

.btn-md {
  padding: 8px 16px;
  font-size: 0.875rem;
  border-radius: var(--radius-lg);
}

.btn-lg {
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: var(--radius-lg);
}

.btn-xl {
  padding: 12px 24px;
  font-size: 1.125rem;
  border-radius: var(--radius-lg);
}

/* Button Width Variants */
.btn-full {
  display: flex;
  width: 100%;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* Button Icon Styles - Consistent Shape */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.btn-icon-sm {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
}

.btn-icon-lg {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
}

/* ============================================================================
   BUTTON STYLE VARIANTS - Theme-Aware
   ============================================================================ */

/* Primary Button - Main CTA */
.btn-primary {
  background: var(--primary, #009640);
  color: white;
  border: none;
  padding: 0.5rem 1.25rem;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark, #007a33);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 150, 64, 0.3);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

/* Secondary Button - Alternative CTA */
.btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--bg-tertiary);
  border-color: var(--border-active);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-secondary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

/* Danger Button - Destructive Actions */
.btn-danger {
  background-color: var(--error);
  color: #ffffff;
  border: 1px solid var(--error);
}

.btn-danger:hover:not(:disabled) {
  background-color: var(--error-dark);
  border-color: var(--error-dark);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
  transform: translateY(-1px);
}

.btn-danger:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.2);
}

/* Success Button - Positive Actions */
.btn-success {
  background-color: var(--success);
  color: var(--text-dark);
  border: 1px solid var(--success);
}

.btn-success:hover:not(:disabled) {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: var(--button-shadow-hover);
  transform: translateY(-1px);
}

.btn-success:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--button-shadow-active);
}

/* Outline Button - Secondary emphasis */
.btn-outline {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--button-bg-hover);
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-outline:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

/* Ghost Button - Minimal style */
.btn-ghost {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-ghost:hover:not(:disabled) {
  background-color: var(--bg-tertiary);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-ghost:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

/* Link Button - Text only */
.btn-link {
  background-color: transparent;
  color: var(--primary);
  border: none;
  padding: 4px 8px;
  text-decoration: none;
  border-radius: var(--radius-md);
}

.btn-link:hover:not(:disabled) {
  color: var(--primary-light);
  text-decoration: underline;
  transform: translateY(-1px);
}

.btn-link:active:not(:disabled) {
  color: var(--primary-dark);
  transform: translateY(0);
}

/* ============================================================================
   BUTTON STATE MODIFIERS
   ============================================================================ */

/* Active State */
.btn.active,
.btn:active {
  transform: translateY(1px);
}

/* Focused State */
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Common Border Utilities */
.border-light {
  border-color: var(--border-light);
}

.border-normal {
  border-color: var(--border-color);
}

/* Utility Classes for Theme-Aware Colors */
.bg-card {
  background-color: var(--card-bg);
}

.bg-secondary {
  background-color: var(--bg-secondary);
}

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

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

/* Transitions */
.theme-transition {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

.main-content {
  padding-top: 60px !important;
}

.display-none {
  display: none !important;
}

/* Footer */
.site-footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-accent);
  padding: var(--space-12) 0 var(--space-4);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.site-footer .container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.site-footer a {
  text-decoration: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-logo-container {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
}

.footer-logo h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
  font-family: var(--font-heading);
}

.footer-logo h1 span {
  color: var(--primary, #009640);
}

.footer-tagline {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: left;
}

.footer-heading {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
  color: var(--text-light);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-link {
  color: var(--neutral-600);
  font-size: 0.875rem;
  transition: color var(--transition-normal);
}

.footer-link:hover {
  color: var(--primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-6);
  border-top: 1px solid var(--neutral-300);
}

.footer-copyright {
  font-size: 0.875rem;
  color: var(--neutral-600);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
  display: none; /* Hidden for now */
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--neutral-200);
  color: var(--neutral-600);
  transition: all var(--transition-normal);
}

.social-link:hover {
  background-color: var(--primary);
  color: var(--text-dark);
  transform: translateY(-2px);
}