:root{
  /* Light theme (default) */
  --background:#f8f8ff;             /* ghostwhite page background */
  --background-container:#ffffff;    /* pure white surfaces */
  --text-color:#0f172a;
  --muted-color:#475569;
  --primary-color:#3b82f6;   /* Azure blue */
  --primary-hover:#1e4fd1;   /* Deeper blue */
  --primary-contrast:#ffffff;
  --border-color:#e5e7eb;
  /* Elevation tokens */
  --surface-shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --surface-shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  /* Link and navbar tokens (light) */
  --link-color:#1d4ed8;            /* blue-700 */
  --link-hover-color:#1e40af;      /* blue-800 */
  --navbar-link-color:#0f172a;     /* slate-900 */
  --navbar-link-hover-color:#1e2937; /* slate-800 */

  /* Bootstrap mappings */
  --bs-body-bg: var(--background);
  --bs-body-color: var(--text-color);
  --bs-border-color: var(--border-color);
  --bs-card-bg: var(--background-container);
  --bs-card-color: var(--text-color);
  --bs-card-border-color: var(--border-color);
  --bs-offcanvas-bg: var(--background-container);
  --bs-offcanvas-color: var(--text-color);
  --bs-dropdown-bg: var(--background-container);
  --bs-dropdown-color: var(--text-color);
  --bs-modal-bg: var(--background-container);
  --bs-modal-color: var(--text-color);
  --bs-popover-bg: var(--background-container);
  --bs-secondary-bg: color-mix(in oklab, var(--background-container), #000 2%);
  --bs-tertiary-bg: color-mix(in oklab, var(--background-container), #000 5%);

  /* Hint native form controls and UA to render light widgets by default */
  color-scheme: light;
}

/* Dark theme */
[data-bs-theme='dark']{
  /* Best-practice neutral dark (graphite) — not a blue variant */
  --background:#0e0f12;               /* near-neutral charcoal */
  --background-container:#15171b;     /* slightly elevated surface */
  --text-color:#e8eaee;               /* soft white for readability */
  --muted-color:#9aa0a6;              /* neutral gray for secondary text */
  --primary-color:#7aa2f7;            /* brand-accented blue that reads well on dark */
  --primary-hover:#5b8ef5;            /* hover with more depth */
  --primary-contrast:#0e0f12;         /* dark bg for button text overlays */
  --border-color:#262a31;             /* subtle neutral border */
  /* Elevation on dark: tighter, softer to avoid halos */
  --surface-shadow-sm: 0 2px 8px rgba(0,0,0,.25);
  --surface-shadow: 0 8px 24px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18);
  /* Dark theme links/navbar */
  --link-color:#a7c5ff;               /* slightly desaturated light blue */
  --link-hover-color:#d3e2ff;         /* lighter on hover */
  --navbar-link-color:#e7e9ee;        /* align with text */
  --navbar-link-hover-color:#ffffff;  /* white */

  /* Bootstrap mappings */
  --bs-body-bg: var(--background);
  --bs-body-color: var(--text-color);
  --bs-border-color: var(--border-color);
  --bs-card-bg: var(--background-container);
  --bs-card-color: var(--text-color);
  --bs-card-border-color: var(--border-color);
  --bs-offcanvas-bg: var(--background-container);
  --bs-offcanvas-color: var(--text-color);
  --bs-dropdown-bg: var(--background-container);
  --bs-dropdown-color: var(--text-color);
  --bs-modal-bg: var(--background-container);
  --bs-modal-color: var(--text-color);
  --bs-popover-bg: var(--background-container);
  --bs-secondary-bg: color-mix(in oklab, var(--background-container), #fff 3%);
  --bs-tertiary-bg: color-mix(in oklab, var(--background-container), #fff 6%);

  /* Ensure native widgets render in dark mode appropriately */
  color-scheme: dark;
}

/* Blue theme: deeper, saturated UI (keeps readable text) */
[data-bs-theme='blue']{
  --background:#0f172a;               /* slate-900 */
  --background-container:#0b1220;     /* deep but lighter than dark's container */
  --text-color:#e5e7eb;               /* slate-200 */
  --muted-color:#cbd5e1;              /* slate-300 */
  --primary-color:#3b82f6;            /* blue-500 */
  --primary-hover:#1e40af;            /* blue-800 */
  --primary-contrast:#ffffff;         /* white text on buttons */
  --border-color:#1e293b;             /* slate-800 */
  /* Elevation on blue: modest to avoid heavy halos */
  --surface-shadow-sm: 0 2px 8px rgba(0,0,0,.22);
  --surface-shadow: 0 8px 24px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.16);
  /* Blue theme links/navbar (cool blues with light hover) */
  --link-color:#93c5fd;               /* blue-300 */
  --link-hover-color:#bfdbfe;         /* blue-200 */
  --navbar-link-color:#e5e7eb;        /* align with text */
  --navbar-link-hover-color:#ffffff;

  /* Bootstrap mappings */
  --bs-body-bg: var(--background);
  --bs-body-color: var(--text-color);
  --bs-border-color: var(--border-color);
  --bs-card-bg: var(--background-container);
  --bs-card-color: var(--text-color);
  --bs-card-border-color: var(--border-color);
  --bs-offcanvas-bg: var(--background-container);
  --bs-offcanvas-color: var(--text-color);
  --bs-dropdown-bg: var(--background-container);
  --bs-dropdown-color: var(--text-color);
  --bs-modal-bg: var(--background-container);
  --bs-modal-color: var(--text-color);
  --bs-popover-bg: var(--background-container);
  --bs-secondary-bg: color-mix(in oklab, var(--background-container), #fff 3%);
  --bs-tertiary-bg: color-mix(in oklab, var(--background-container), #fff 6%);

  /* Blue behaves as a dark variant for native widgets */
  color-scheme: dark;
}

/* Utilities wired into components */
body{
  background:var(--background);
  color:var(--text-color);
}
.navbar, .offcanvas{ background:var(--background-container); }
/* Make the top app bar transparent for the store while keeping offcanvas themed */
.navbar.navbar-custom-space{ background: transparent !important; box-shadow:none !important; border-color: transparent !important; }
.navbar a, .offcanvas a{ color:var(--navbar-link-color, var(--text-color)); text-decoration: none; }
.navbar a:hover, .navbar a:focus,
.offcanvas a:hover, .offcanvas a:focus{ color:var(--navbar-link-hover-color, var(--link-hover-color)); }
.card{ background-color:var(--background-container); }
.text-muted{ color:var(--muted-color) !important; }
.border{ border-color:var(--border-color) !important; }
/* Global links */
a{ color:var(--link-color); }
a:hover, a:focus{ color:var(--link-hover-color); }
.btn-primary, .btn-outline-primary{
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-color: var(--primary-contrast);
}

/* Improve text selection contrast per theme */
::selection{ background: color-mix(in oklab, var(--primary-color), #fff 70%); color: #0b1220; }
[data-bs-theme='dark'] ::selection,
[data-bs-theme='blue'] ::selection{ background: color-mix(in oklab, var(--primary-color), #000 65%); color: #ffffff; }

/* Ensure navbar hamburger has sufficient contrast on dark/blue */
[data-bs-theme='dark'] .navbar .navbar-toggler .navbar-toggler-icon,
[data-bs-theme='dark'] .navbar .navbar-toggler-icon,
[data-bs-theme='blue'] .navbar .navbar-toggler .navbar-toggler-icon,
[data-bs-theme='blue'] .navbar .navbar-toggler-icon {
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255,255,255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.65));
}

/* Light theme: give white surfaces pleasing elevation against ghostwhite bg */
[data-bs-theme='light'] .card,
[data-bs-theme='light'] .offcanvas,
[data-bs-theme='light'] .dropdown-menu,
[data-bs-theme='light'] .modal-content,
[data-bs-theme='light'] .popover,
[data-bs-theme='light'] .toast,
[data-bs-theme='light'] .bg-white,
[data-bs-theme='light'] .bg-light{
  box-shadow: var(--surface-shadow);
  border-color: color-mix(in oklab, var(--border-color), #000 4%);
}