/* Global Trip Tracker Theme Overrides for Bootstrap 5 */

/*
  Design tokens (HSL) — light (:root) and dark (.dark) modes
  The .dark class on html/body can force dark mode; otherwise prefers-color-scheme will apply.
*/

:root {
  /* Base colors */
  --white: hsl(0 0% 100%);
  --black: hsl(0 0% 0%);

  /* Tailwind greys */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Brand / accent */
  --primary: #009840; /* green */
  --destructive: #EF4444; /* red */
  --link: #3B82F6; /* blue */
  --link-hover: #1D4ED8; /* darker blue */

  /* Theme tokens (HSL) */
  --background: hsl(0 0% 100%);
  --foreground: hsl(222.2 84% 4.9%);
  --secondary: hsl(210 40% 96.1%);
  --muted: var(--secondary);
  --accent: var(--secondary);
  --ring: hsl(222.2 84% 4.9%);

  /* Map tokens to Bootstrap CSS variables */
  --bs-body-bg: var(--background);
  --bs-body-color: var(--foreground);
  --bs-primary: var(--primary);
  --bs-danger: var(--destructive);
  --bs-secondary: #a7c0d8; /* pale grey-blue */
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--link-hover);
  --bs-secondary-bg-subtle: #e6eff6; /* light grey-blue */
  --bs-border-color: var(--gray-200);
}

.dark {
  --background: hsl(222.2 84% 4.9%);
  --foreground: hsl(210 40% 98%);
  --secondary: hsl(217.2 32.6% 17.5%);
  --muted: var(--secondary);
  --accent: var(--secondary);
  --destructive: #783030; /* darker red */
  --ring: hsl(212.7 26.8% 83.9%);

  --bs-body-bg: var(--background);
  --bs-body-color: var(--foreground);
  --bs-primary: #009840;
  --bs-danger: var(--destructive);
  --bs-secondary: #374151; /* charcoal */
  --bs-link-color: #22c55e;
  --bs-link-hover-color: #16a34a;
  --bs-secondary-bg-subtle: #1f2937;
  --bs-border-color: #334155;
  color-scheme: dark;
}

/* Also support OS-level dark preference when .dark is not used */
@media (prefers-color-scheme: dark) {
  :root:not(.force-light) {
    --background: hsl(222.2 84% 4.9%);
    --foreground: hsl(210 40% 98%);
    --secondary: hsl(217.2 32.6% 17.5%);
    --muted: var(--secondary);
    --accent: var(--secondary);
    --destructive: #783030;
    --ring: hsl(212.7 26.8% 83.9%);

    --bs-body-bg: var(--background);
    --bs-body-color: var(--foreground);
    --bs-primary: #009840;
    --bs-danger: var(--destructive);
    --bs-secondary: #374151;
    --bs-link-color: #22c55e;
    --bs-link-hover-color: #16a34a;
    --bs-secondary-bg-subtle: #1f2937;
    --bs-border-color: #334155;
    color-scheme: dark;
  }
}

/* Component refinements */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #007a34; /* 80% primary */
  --bs-btn-hover-border-color: #007331;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--gray-900);
}

.text-primary { color: var(--bs-primary) !important; }
.bg-primary { background-color: var(--bs-primary) !important; }

/* Cards and surface elements inherit theme */
.card { background-color: var(--bs-body-bg); color: var(--bs-body-color); }
.navbar { background-color: transparent; }