/* ============================================================================
   SLAM Design System — Tokens (single source of truth)
   ----------------------------------------------------------------------------
   This file re-themes Bootstrap 5.3 by overriding its CSS custom properties
   (--bs-*) plus the project's existing token layers (--slam-*, --btn-action-*,
   --page-action-bar-*, and the legacy custom.css/style.css variables).

   Because the SLAM component classes (.slam-panel, .info-tile, .page-action-bar,
   .card, .btn, .table, modals, etc.) read these variables, re-pointing them here
   reskins the entire platform with zero per-page edits and zero runtime cost.

   Design direction: futuristic "web report / command-center".
     - Neutral, slightly cool surfaces with real layered elevation
     - One confident indigo -> cyan accent
     - Larger radii, crisp hairline borders, snappy micro-motion
     - Light is crisp and airy; dark is a deep navy command center

   NOTE: Semantic intent colors (success / danger / warning / info) are kept on
   Bootstrap's defaults on purpose — hundreds of templates hardcode those hexes,
   so preserving them keeps everything in harmony.
   ============================================================================ */

:root {
  /* ---- Brand accent (Scaffold Insite: slate + light/sky blue + white) ----
     The interactive accent is a clear sky blue with AA-contrast for white text;
     --slam-sky is the softer "baby blue" used for highlights, active states and
     glass tints. --slam-cyan is kept as a token name but points at the light
     blue so existing gradients read on-brand. */
  --slam-accent: #0284c7;
  --slam-accent-hover: #0369a1;
  --slam-accent-active: #075985;
  --slam-accent-rgb: 2, 132, 199;
  --slam-accent-contrast: #ffffff;
  --slam-sky: #38bdf8;
  --slam-sky-rgb: 56, 189, 248;
  --slam-cyan: #38bdf8;
  --slam-cyan-rgb: 56, 189, 248;
  --slam-accent-soft: rgba(2, 132, 199, 0.09);
  --slam-accent-soft-strong: rgba(2, 132, 199, 0.15);

  /* ---- Surface elevation scale (light): slate + white ----
     surface-0 = app background, surface-1 = cards/panels/inputs,
     surface-2 = headers / striped rows / subtle fills, surface-3 = hover. */
  --slam-surface-0: #eef2f7;
  --slam-surface-1: #ffffff;
  --slam-surface-2: #f1f5f9;
  --slam-surface-3: #e2e8f0;

  /* ---- Text (slate) ---- */
  --slam-text: #334155;
  --slam-text-strong: #0f172a;
  --slam-text-muted: #64748b;

  /* ---- Border (subtle; we lean on spacing + elevation over hard boxes) ---- */
  --slam-border: #e6ebf2;
  --slam-border-strong: #cfd8e6;

  /* ---- Spacing scale ---- */
  --slam-space-1: 0.25rem;
  --slam-space-2: 0.5rem;
  --slam-space-3: 0.75rem;
  --slam-space-4: 1rem;
  --slam-space-5: 1.5rem;
  --slam-space-6: 2rem;

  /* ---- Radius scale ---- */
  --slam-radius-sm: 0.45rem;
  --slam-radius-md: 0.7rem;
  --slam-radius-lg: 0.95rem;
  --slam-radius-xl: 1.2rem;
  --slam-radius-pill: 999px;

  /* ---- Elevation (light) ---- */
  --slam-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.07);
  --slam-shadow-2: 0 2px 6px -2px rgba(15, 23, 42, 0.10), 0 8px 20px -8px rgba(15, 23, 42, 0.14);
  --slam-shadow-3: 0 12px 32px -8px rgba(15, 23, 42, 0.22);
  --slam-shadow-soft: var(--slam-shadow-2);
  --slam-focus-ring: 0 0 0 0.2rem rgba(var(--slam-accent-rgb), 0.30);

  /* ---- Glass (Apple-style frosted surfaces) ----
     Used for floating chrome / overlays where content shows through. Blur is
     applied ONLY to small/overlay surfaces (nav, dropdowns, modals, action bar)
     to stay millisecond-snappy on dense list/grid pages. */
  --slam-glass-bg: rgba(255, 255, 255, 0.72);
  --slam-glass-bg-strong: rgba(255, 255, 255, 0.85);
  --slam-glass-border: rgba(255, 255, 255, 0.65);
  --slam-glass-hairline: rgba(15, 23, 42, 0.08);
  --slam-glass-blur: saturate(160%) blur(16px);
  --slam-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  /* Card surface: a hair of translucency + soft elevation, no blur cost. */
  --slam-card-bg: #ffffff;

  /* ---- Motion ---- */
  --slam-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --slam-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --slam-dur-fast: 120ms;
  --slam-dur: 170ms;
  --slam-dur-slow: 260ms;

  /* ---- Layout ---- */
  --slam-page-max-width: 1600px;
  --slam-shell-padding: clamp(0.75rem, 1.5vw, 1.5rem);
  --slam-panel-padding: clamp(0.875rem, 1.3vw, 1.25rem);
  --slam-table-max-height: min(68vh, 640px);

  /* ============================================================
     Bootstrap variable overrides (LIGHT)
     ============================================================ */
  --bs-body-bg: var(--slam-surface-1);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: var(--slam-text);
  --bs-body-color-rgb: 51, 65, 85;
  --bs-emphasis-color: var(--slam-text-strong);
  --bs-emphasis-color-rgb: 15, 23, 42;
  --bs-secondary-color: var(--slam-text-muted);
  --bs-secondary-bg: var(--slam-surface-2);
  --bs-secondary-bg-rgb: 243, 246, 252;
  --bs-tertiary-color: var(--slam-text-muted);
  --bs-tertiary-bg: var(--slam-surface-2);
  --bs-tertiary-bg-rgb: 243, 246, 252;
  --bs-heading-color: var(--slam-text-strong);

  --bs-border-color: var(--slam-border);
  --bs-border-color-translucent: rgba(15, 23, 42, 0.10);

  --bs-primary: var(--slam-accent);
  --bs-primary-rgb: var(--slam-accent-rgb);
  --bs-primary-text-emphasis: var(--slam-accent-active);
  --bs-primary-bg-subtle: rgba(var(--slam-accent-rgb), 0.10);
  --bs-primary-border-subtle: rgba(var(--slam-accent-rgb), 0.30);

  --bs-link-color: var(--slam-accent);
  --bs-link-color-rgb: var(--slam-accent-rgb);
  --bs-link-hover-color: var(--slam-accent-hover);
  --bs-link-hover-color-rgb: 67, 56, 202;

  --bs-border-radius: var(--slam-radius-md);
  --bs-border-radius-sm: var(--slam-radius-sm);
  --bs-border-radius-lg: var(--slam-radius-lg);
  --bs-border-radius-xl: var(--slam-radius-xl);
  --bs-border-radius-pill: var(--slam-radius-pill);

  --bs-box-shadow: var(--slam-shadow-2);
  --bs-box-shadow-sm: var(--slam-shadow-1);
  --bs-box-shadow-lg: var(--slam-shadow-3);

  /* Card surface should sit one step above the app background. */
  --bs-card-bg: var(--slam-surface-1);
  --bs-card-border-color: var(--slam-border);
  --bs-card-cap-bg: var(--slam-surface-2);

  /* ---- Bridges to existing component variables ---- */
  /* Action-button palette (theme-custom.css consumes these). */
  --btn-action-radius: var(--slam-radius-md);
  --btn-action-shadow: var(--slam-shadow-1);
  --btn-action-shadow-hover: var(--slam-shadow-2);
  --btn-action-focus-ring: var(--slam-focus-ring);
  --btn-action-primary-bg: var(--slam-accent);
  --btn-action-primary-bg-hover: var(--slam-accent-hover);
  --btn-action-primary-bg-active: var(--slam-accent-active);
  --btn-action-neutral-border: var(--slam-accent);
  --btn-action-neutral-color: var(--slam-accent);
  --btn-action-neutral-bg-hover: var(--slam-accent-soft-strong);

  /* Floating page action bar (page-chrome.css consumes these). */
  --page-action-bar-bg: rgba(255, 255, 255, 0.92);
  --page-action-bar-border: var(--slam-border);
  --page-action-bar-shadow: var(--slam-shadow-2);

  /* Legacy style.css palette bridge. */
  --primary-color: var(--slam-accent);
  --hover-bg: var(--slam-surface-3);
}

/* Explicit light selector so the toggle is deterministic. */
[data-bs-theme="light"] {
  color-scheme: light;
}

/* ============================================================
   Bootstrap variable overrides (DARK) — deep navy command center
   ============================================================ */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --slam-accent: #38bdf8;
  --slam-accent-hover: #7dd3fc;
  --slam-accent-active: #bae6fd;
  --slam-accent-rgb: 56, 189, 248;
  --slam-accent-contrast: #051018;
  --slam-sky: #7dd3fc;
  --slam-sky-rgb: 125, 211, 252;
  --slam-cyan: #7dd3fc;
  --slam-cyan-rgb: 125, 211, 252;
  --slam-accent-soft: rgba(56, 189, 248, 0.14);
  --slam-accent-soft-strong: rgba(56, 189, 248, 0.24);

  /* Deep space-slate surfaces */
  --slam-surface-0: #0a0f1c;
  --slam-surface-1: #121a2b;
  --slam-surface-2: #1a2436;
  --slam-surface-3: #243049;

  --slam-text: #dbe4f0;
  --slam-text-strong: #f8fafc;
  --slam-text-muted: #9aa8bd;

  --slam-border: #233048;
  --slam-border-strong: #324159;

  --slam-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.35);
  --slam-shadow-2: 0 4px 14px -4px rgba(0, 0, 0, 0.6), 0 10px 28px -12px rgba(0, 0, 0, 0.55);
  --slam-shadow-3: 0 18px 44px -10px rgba(0, 0, 0, 0.7);
  --slam-focus-ring: 0 0 0 0.2rem rgba(var(--slam-accent-rgb), 0.40);

  /* Glass (dark): translucent space-slate with a faint light-blue edge. */
  --slam-glass-bg: rgba(18, 26, 43, 0.62);
  --slam-glass-bg-strong: rgba(18, 26, 43, 0.82);
  --slam-glass-border: rgba(125, 211, 252, 0.14);
  --slam-glass-hairline: rgba(255, 255, 255, 0.08);
  --slam-glass-blur: saturate(150%) blur(16px);
  --slam-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --slam-card-bg: #121a2b;

  --bs-body-bg: var(--slam-surface-1);
  --bs-body-bg-rgb: 20, 28, 48;
  --bs-body-color: var(--slam-text);
  --bs-body-color-rgb: 214, 222, 236;
  --bs-emphasis-color: var(--slam-text-strong);
  --bs-emphasis-color-rgb: 244, 247, 252;
  --bs-secondary-color: var(--slam-text-muted);
  --bs-secondary-bg: var(--slam-surface-2);
  --bs-secondary-bg-rgb: 28, 39, 64;
  --bs-tertiary-color: var(--slam-text-muted);
  --bs-tertiary-bg: var(--slam-surface-2);
  --bs-tertiary-bg-rgb: 28, 39, 64;
  --bs-heading-color: var(--slam-text-strong);

  --bs-border-color: var(--slam-border);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.10);

  --bs-primary: var(--slam-accent);
  --bs-primary-rgb: var(--slam-accent-rgb);
  --bs-primary-text-emphasis: var(--slam-accent-active);
  --bs-primary-bg-subtle: rgba(var(--slam-accent-rgb), 0.20);
  --bs-primary-border-subtle: rgba(var(--slam-accent-rgb), 0.40);

  --bs-link-color: var(--slam-accent-hover);
  --bs-link-color-rgb: var(--slam-sky-rgb);
  --bs-link-hover-color: var(--slam-accent-active);
  --bs-link-hover-color-rgb: 165, 180, 252;

  --bs-card-bg: var(--slam-surface-1);
  --bs-card-border-color: var(--slam-border);
  --bs-card-cap-bg: var(--slam-surface-2);

  --btn-action-shadow: var(--slam-shadow-1);
  --btn-action-shadow-hover: var(--slam-shadow-2);
  --btn-action-neutral-color: var(--slam-accent-hover);
  --btn-action-neutral-border: var(--slam-accent-hover);
  --btn-action-neutral-bg-hover: var(--slam-accent-soft-strong);

  --page-action-bar-bg: rgba(20, 28, 48, 0.92);
  --page-action-bar-border: var(--slam-border);
  --page-action-bar-shadow: var(--slam-shadow-2);
}

/* ============================================================
   Bridge the legacy custom.css dark palette (it keys off
   html[data-theme="dark"] and drives nav / sidebar / chrome).
   Re-pointing these makes the existing dark chrome rules adopt
   the new command-center palette without editing custom.css.
   ============================================================ */
html[data-theme="dark"] {
  --primary: var(--slam-surface-2);
  --primary-fg: var(--slam-text-strong);

  --body-fg: var(--slam-text);
  --body-bg: var(--slam-surface-0);
  --body-quiet-color: var(--slam-text-muted);
  --body-medium-color: var(--slam-text);
  --body-loud-color: var(--slam-text-strong);

  --link-fg: var(--slam-accent-hover);
  --link-hover-color: var(--slam-accent-active);

  --hairline-color: var(--slam-border);
  --border-color: var(--slam-border);

  --darkened-bg: var(--slam-surface-1);
  --selected-bg: var(--slam-surface-3);
}