/* ============================================================
   Eureka Solutions — shared suite theme (DESIGN.md §8)
   Loaded AFTER Bootstrap so brand tokens win. Maps the Eureka
   design tokens onto Bootstrap's CSS variables + the few prebuilt
   components we use, so Bootstrap comes out on-brand without a
   Sass rebuild. Tool-specific styles live with their tool.
   ============================================================ */

/* --- Brand design tokens --------------------------------------------------- */
:root {
  --eureka-navy: #0D1F3C;
  --eureka-navy-mid: #1A3358;
  --eureka-teal: #396292;
  --eureka-teal-light: #c5d6eb;
  --eureka-teal-lighter: #f6f9fe;
  --eureka-teal-dark: #234b79;
  --eureka-sky: #E8F4FD;
  --gray-50: #F8F9FB;
  --gray-100: #F0F2F6;
  --gray-200: #E2E6EE;
  --gray-400: #A8B2C4;
  --gray-600: #637082;
  --gray-800: #2D3748;
  --gray-900: #1A202C;
  --danger: #E53E3E;
  --danger-light: #FFF5F5;
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --shadow-card: 0 4px 24px rgba(13, 31, 60, 0.08);
  --shadow-input-focus: 0 0 0 3px rgba(0, 96, 180, 0.2);
  --shadow-btn: 0 2px 8px rgba(0, 96, 180, 0.35);
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

/* --- Map brand tokens onto Bootstrap --------------------------------------- */
:root {
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--gray-800);
  --bs-body-bg: var(--gray-50);
  --bs-primary: var(--eureka-teal);
  --bs-primary-rgb: 57, 98, 146;
  --bs-link-color: var(--eureka-teal-dark);
  --bs-link-color-rgb: 35, 75, 121;
  --bs-link-hover-color: var(--eureka-navy);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-color: var(--gray-200);
}

/* --- Typography ------------------------------------------------------------ */
body { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--font-display); color: var(--eureka-navy); }
.text-secondary { color: var(--gray-600) !important; }

/* --- Buttons (prebuilt variants use compiled colors → re-point their vars) -- */
.btn-primary {
  --bs-btn-bg: var(--eureka-teal);
  --bs-btn-border-color: var(--eureka-teal);
  --bs-btn-hover-bg: var(--eureka-teal-dark);
  --bs-btn-hover-border-color: var(--eureka-teal-dark);
  --bs-btn-active-bg: var(--eureka-teal-dark);
  --bs-btn-active-border-color: var(--eureka-teal-dark);
  --bs-btn-disabled-bg: var(--eureka-teal);
  --bs-btn-disabled-border-color: var(--eureka-teal);
}
.btn-outline-primary {
  --bs-btn-color: var(--eureka-teal-dark);
  --bs-btn-border-color: var(--eureka-teal);
  --bs-btn-hover-bg: var(--eureka-teal);
  --bs-btn-hover-border-color: var(--eureka-teal);
  --bs-btn-active-bg: var(--eureka-teal-dark);
  --bs-btn-active-border-color: var(--eureka-teal-dark);
}

/* --- Cards / inputs -------------------------------------------------------- */
.card {
  --bs-card-border-color: var(--gray-200);
  --bs-card-border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.form-control:focus, .form-select:focus {
  border-color: var(--eureka-teal);
  box-shadow: var(--shadow-input-focus);
}

/* --- Navbar (brand chrome) ------------------------------------------------- */
.eureka-navbar { background: var(--eureka-navy); }
.eureka-navbar .navbar-brand { color: #fff; font-weight: 700; }
.brand-accent { color: var(--eureka-teal-light); }

/* --- Tier badges ----------------------------------------------------------- */
.badge-admin { background: #fde8e8; color: #b42318; }
.badge-staff { background: var(--eureka-teal-light); color: var(--eureka-teal-dark); }
.badge-customer { background: #e7f6ec; color: #1a7f48; }

/* --- Shared bits ----------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--eureka-teal); background: var(--eureka-teal-light);
  padding: 5px 14px; border-radius: var(--radius-full);
}
.tool-card { transition: transform var(--transition-base), border-color var(--transition-base); }
.tool-card:hover { transform: translateY(-2px); border-color: var(--eureka-teal); }