/* ============================================================
   Hub — Design Tokens (white-label)
   Version: 2.1
   Themes: Industrial Nexus (Dark) + Industrial Precision (Light)
   NOTE: brand slots below (--pt-deep-navy / --pt-accent-red / --pt-sidebar-bg /
   --pt-font-*) hold NEUTRAL fallbacks only. The active brand overrides them at
   RUNTIME via /js/brand.js from brands/<tenant>.json — no brand value is hard-coded.
   ============================================================ */

/* ── Dark Mode Default ── */
:root,
[data-theme="dark"] {
  --pt-bg: #101416;
  --pt-surface: #101416;
  --pt-surface-container-lowest: #0B0F11;
  --pt-surface-container-low: #191C1E;
  --pt-surface-container: #1D2022;
  --pt-surface-container-high: #272A2D;
  --pt-surface-container-highest: #323538;
  --pt-on-surface: #E0E3E6;
  --pt-on-surface-variant: #C5C6CF;
  --pt-outline: #8F9099;
  --pt-outline-variant: #45464E;

  /* Brand slots — NEUTRAL fallbacks; overridden at runtime by /js/brand.js. */
  --pt-deep-navy: #1A2530;
  --pt-deep-charcoal: #0B1120;
  --pt-industrial-blue: #1F3B57;
  --pt-accent-red: #888888;
  --pt-accent-foreground: #FFFFFF;
  --pt-accent-rgb: 136, 136, 136;
  --pt-steel-gray: #6B7280;
  --pt-light-gray: #F5F7FA;
  --pt-white: #FFFFFF;
  --pt-text-dark: #151C27;
  --pt-text-muted: #45464E;
  --pt-border-light: #E5E7EB;
  --pt-border-dark: #334155;
  --pt-muted-blue-gray: #334155;
  --pt-ocean-blue: #12384A;

  /* Semantic */
  --pt-success: #10B981;
  --pt-warning: #F59E0B;
  --pt-error: #EF4444;

  /* Typography */
  --pt-font-heading: 'Montserrat', 'Manrope', sans-serif;
  --pt-font-body: 'Inter', 'Manrope', Arial, sans-serif;
  --pt-font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* Radius */
  --pt-radius-xs: 2px;
  --pt-radius-sm: 4px;
  --pt-radius-md: 8px;
  --pt-radius-lg: 12px;
  --pt-radius-xl: 16px;

  /* Shadows */
  --pt-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15);
  --pt-shadow-md: 0 8px 18px rgba(0, 0, 0, 0.2);
  --pt-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.35);
  --pt-shadow-glow: 0 0 20px rgba(136, 136, 136, 0.15);

  /* Spacing */
  --pt-space-1: 4px;
  --pt-space-2: 8px;
  --pt-space-3: 12px;
  --pt-space-4: 16px;
  --pt-space-5: 24px;
  --pt-space-6: 32px;
  --pt-space-7: 40px;
  --pt-space-8: 48px;
  --pt-space-9: 64px;
  --pt-space-10: 80px;

  /* Container */
  --pt-container: 1280px;
  --pt-gutter: 24px;
  --pt-mobile-margin: 16px;

  /* Transitions */
  --pt-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --pt-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --pt-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Theme-specific (sidebar bg + active bg are brand slots — runtime overridden) */
  --pt-sidebar-bg: #1A2530;
  --pt-sidebar-text: #FFFFFF;
  --pt-sidebar-muted: #8F9099;
  --pt-sidebar-border: #334155;
  --pt-sidebar-hover: rgba(255, 255, 255, 0.05);
  --pt-sidebar-active-bg: rgba(136, 136, 136, 0.12);
  --pt-bottomnav-bg: rgba(16, 20, 22, 0.92);
  --pt-card-footer-bg: rgba(0, 0, 0, 0.15);
}

/* ── Light Mode ── */
[data-theme="light"] {
  --pt-bg: #F5F7FA;
  --pt-surface: #FFFFFF;
  --pt-surface-container-lowest: #FFFFFF;
  --pt-surface-container-low: #F0F3FF;
  --pt-surface-container: #E7EEFE;
  --pt-surface-container-high: #E2E8F8;
  --pt-surface-container-highest: #DCE2F3;
  --pt-on-surface: #151C27;
  --pt-on-surface-variant: #45464E;
  --pt-outline: #75777F;
  --pt-outline-variant: #C5C6CF;

  --pt-border-dark: #D1D5DB;
  --pt-muted-blue-gray: #E2E8F8;

  /* Shadows - lighter */
  --pt-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --pt-shadow-md: 0 8px 18px rgba(0, 0, 0, 0.08);
  --pt-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
  --pt-shadow-glow: 0 0 20px rgba(var(--pt-accent-rgb), 0.08);

  /* Theme-specific (light mode keeps a white sidebar; active bg from accent) */
  --pt-sidebar-bg: #FFFFFF;
  --pt-sidebar-text: #151C27;
  --pt-sidebar-muted: #75777F;
  --pt-sidebar-border: #E5E7EB;
  --pt-sidebar-hover: rgba(0, 0, 0, 0.04);
  --pt-sidebar-active-bg: rgba(var(--pt-accent-rgb), 0.10);
  --pt-bottomnav-bg: rgba(255, 255, 255, 0.92);
  --pt-card-footer-bg: rgba(0, 0, 0, 0.03);
}