/* ============================================
   TMS — DESIGN TOKENS (Layer 1 of 4)

   Single source of truth for values: brand colors, theme
   palette, spacing/radius/shadow scales, semantic status
   colors, and the Bootstrap variable bridge.

   Load order: bootstrap.css -> THIS -> global.css -> components.css -> page
   Loaded on every page. Contains ONLY custom properties — no selectors
   that paint. See docs/patterns/css-architecture.md.
   ============================================ */

:root {
  /* --- Layout chrome metrics --- */
  --sidebar-width: clamp(180px, 14vw, 260px);
  --sidebar-collapsed: 80px;
  --navbar-height: 57px;
  --breadcrumb-height: 2.75rem;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Brand palette (tenant-themeable) --- */
  --tenant-web-primary: #22c55e;
  --tenant-web-primary-rgb: 34, 197, 94;
  /* Darker brand shade for text/fills on light surfaces (AA); JS recomputes it per tenant. */
  --tenant-web-primary-strong: #16803d;
  --tenant-web-primary-strong-rgb: 22, 128, 61;
  --tenant-web-secondary: #212529;
  --tenant-web-secondary-rgb: 33, 37, 41;
  --tenant-web-secondary-contrast: #f8fafc;
  --tenant-web-accent: #0b2545;
  --tenant-web-accent-rgb: 11, 37, 69;
  --tenant-web-title: #2e4057;
  --tenant-web-text: #2e4057;
  --tenant-web-background: #f7f6f6;
  --tenant-web-text-light: #2e4057;
  --tenant-web-text-dark: #e8eef7;
  --tenant-web-muted-light: #64748b;
  --tenant-web-muted-dark: #a8b8cc;
  --tenant-web-page-light: #f7f6f6;
  --tenant-web-page-dark: #0f172a;
  --tenant-web-surface-light: #ffffff;
  --tenant-web-surface-dark: #111827;
  --tenant-web-border-light: #cbd5e1;
  --tenant-web-border-dark: #334155;
  --tenant-web-hover-light: rgba(34, 197, 94, 0.12);
  --tenant-web-hover-dark: rgba(34, 197, 94, 0.2);
  --tenant-web-hero-light: #0b2545;
  --tenant-web-hero-dark: #020617;
  --tenant-web-sidebar-light: #0b2545;
  --tenant-web-sidebar-dark: #071730;
  --tenant-web-sidebar-color-light: #f8fafc;
  --tenant-web-sidebar-color-dark: #e8eef7;
  --tenant-web-sidebar-muted-light: rgba(248, 250, 252, 0.72);
  --tenant-web-sidebar-muted-dark: rgba(232, 238, 247, 0.72);
  --tenant-web-sidebar-hover-light: rgba(22, 163, 74, 0.24);
  --tenant-web-sidebar-hover-dark: rgba(22, 163, 74, 0.3);
  --tenant-web-sidebar-hover-text-light: #f8fafc;
  --tenant-web-sidebar-hover-text-dark: #f8fafc;
  --tenant-web-sidebar-indicator-light: rgba(22, 163, 74, 0.58);
  --tenant-web-sidebar-indicator-dark: rgba(22, 163, 74, 0.72);
  --tenant-web-sidebar-border-light: rgba(248, 250, 252, 0.12);
  --tenant-web-sidebar-border-dark: rgba(232, 238, 247, 0.12);
  --tenant-web-sidebar-toggle-light: rgba(11, 37, 69, 0.16);
  --tenant-web-sidebar-toggle-dark: rgba(2, 6, 23, 0.22);
  --sidebar-toggle-static-bg-light: #f8fafc;
  --sidebar-toggle-static-border-light: #cbd5e1;
  --sidebar-toggle-static-color-light: #334155;
  --sidebar-toggle-static-hover-bg-light: #e2e8f0;
  --sidebar-toggle-static-hover-border-light: #94a3b8;
  --sidebar-toggle-static-hover-color-light: #0f172a;
  --sidebar-toggle-static-bg-dark: #111827;
  --sidebar-toggle-static-border-dark: #475569;
  --sidebar-toggle-static-color-dark: #f8fafc;
  --sidebar-toggle-static-hover-bg-dark: #1e293b;
  --sidebar-toggle-static-hover-border-dark: #64748b;
  --sidebar-toggle-static-hover-color-dark: #ffffff;
  --tenant-web-primary-contrast: #f8fafc;
  --tenant-web-accent-contrast: #f8fafc;

  /* --- Resolved (theme-aware) brand aliases — default light --- */
  --tenant-web-page-bg: var(--tenant-web-page-light);
  --tenant-web-surface-bg: var(--tenant-web-surface-light);
  --tenant-web-border-color: var(--tenant-web-border-light);
  --tenant-web-body-color: var(--tenant-web-text-light);
  --tenant-web-muted-color: var(--tenant-web-muted-light);
  --tenant-web-hover-bg: var(--tenant-web-hover-light);
  --tenant-web-hover-text: var(--tenant-web-primary);
  --tenant-web-sidebar-bg: var(--tenant-web-sidebar-light);
  --tenant-web-sidebar-color: var(--tenant-web-sidebar-color-light);
  --tenant-web-sidebar-muted: var(--tenant-web-sidebar-muted-light);
  --tenant-web-sidebar-hover-bg: var(--tenant-web-sidebar-hover-light);
  --tenant-web-sidebar-hover-text: var(--tenant-web-sidebar-hover-text-light);
  --tenant-web-sidebar-indicator: var(--tenant-web-sidebar-indicator-light);
  --tenant-web-sidebar-border-color: var(--tenant-web-sidebar-border-light);
  --tenant-web-sidebar-toggle-bg: var(--tenant-web-sidebar-toggle-light);
  --tenant-web-hero-bg: var(--tenant-web-hero-light);

  /* --- Spacing scale (use instead of ad-hoc rem values) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;

  /* --- Radius scale --- */
  --radius-sm: 0.5rem;
  --radius-md: 0.65rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  /* --- Shadow scale --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.1);

  /* --- Semantic status palette (light). Replaces ad-hoc chip/legend/tone colors. --- */
  --status-success-bg: #e9f8f2;
  --status-success-border: rgba(22, 163, 74, 0.35);
  --status-success-text: #15803d;
  --status-warning-bg: #fef6e7;
  --status-warning-border: rgba(245, 158, 11, 0.35);
  --status-warning-text: #b45309;
  --status-danger-bg: #fdecec;
  --status-danger-border: rgba(220, 53, 69, 0.35);
  --status-danger-text: #b02a37;
  --status-info-bg: #e8f1fd;
  --status-info-border: rgba(37, 99, 235, 0.35);
  --status-info-text: #1d4ed8;
  --status-neutral-bg: #eef2f7;
  --status-neutral-border: rgba(100, 116, 139, 0.3);
  --status-neutral-text: #334a68;

  /* --- Bootstrap bridge: brand drives Bootstrap components (no class overrides needed) --- */
  --bs-primary: var(--tenant-web-primary);
  --bs-primary-rgb: var(--tenant-web-primary-rgb);
  /* Success is a status color, not the brand: a fixed AA-safe green on light surfaces. */
  --bs-success: #15803d;
  --bs-success-rgb: 21, 128, 61;
  /* Danger text must stay AA on white and on tinted surfaces (#dc3545 drops to 4.15:1 there). */
  --bs-danger: #bb2d3b;
  --bs-danger-rgb: 187, 45, 59;
  --bs-link-color: var(--tenant-web-primary-strong);
  --bs-link-color-rgb: var(--tenant-web-primary-strong-rgb);
  --bs-link-hover-color: var(--tenant-web-secondary);
  --bs-card-border-radius: var(--radius-md);
}

[data-bs-theme="dark"] {
  /* On dark surfaces the bright greens are the readable ones. */
  --bs-success: #22c55e;
  --bs-success-rgb: 34, 197, 94;
  --bs-link-color: var(--tenant-web-primary);
  --bs-link-color-rgb: var(--tenant-web-primary-rgb);
  --tenant-web-page-bg: var(--tenant-web-page-dark);
  --tenant-web-surface-bg: var(--tenant-web-surface-dark);
  --tenant-web-border-color: var(--tenant-web-border-dark);
  --tenant-web-body-color: var(--tenant-web-text-dark);
  --tenant-web-muted-color: var(--tenant-web-muted-dark);
  --tenant-web-hover-bg: var(--tenant-web-hover-dark);
  --tenant-web-hover-text: var(--tenant-web-text-dark);
  --tenant-web-sidebar-bg: var(--tenant-web-sidebar-dark);
  --tenant-web-sidebar-color: var(--tenant-web-sidebar-color-dark);
  --tenant-web-sidebar-muted: var(--tenant-web-sidebar-muted-dark);
  --tenant-web-sidebar-hover-bg: var(--tenant-web-sidebar-hover-dark);
  --tenant-web-sidebar-hover-text: var(--tenant-web-sidebar-hover-text-dark);
  --tenant-web-sidebar-indicator: var(--tenant-web-sidebar-indicator-dark);
  --tenant-web-sidebar-border-color: var(--tenant-web-sidebar-border-dark);
  --tenant-web-sidebar-toggle-bg: var(--tenant-web-sidebar-toggle-dark);
  --tenant-web-hero-bg: var(--tenant-web-hero-dark);

  /* Semantic status palette (dark) */
  --status-success-bg: rgba(34, 197, 94, 0.16);
  --status-success-border: rgba(34, 197, 94, 0.4);
  --status-success-text: #6ee7a8;
  --status-warning-bg: rgba(245, 158, 11, 0.16);
  --status-warning-border: rgba(245, 158, 11, 0.4);
  --status-warning-text: #fbbf24;
  --status-danger-bg: rgba(220, 53, 69, 0.18);
  --status-danger-border: rgba(220, 53, 69, 0.4);
  --status-danger-text: #fda4af;
  --status-info-bg: rgba(37, 99, 235, 0.18);
  --status-info-border: rgba(37, 99, 235, 0.4);
  --status-info-text: #93b4fc;
  --status-neutral-bg: rgba(148, 163, 184, 0.16);
  --status-neutral-border: rgba(148, 163, 184, 0.32);
  --status-neutral-text: #cbd5e1;

  /* Shadows read deeper on dark surfaces */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);
}