/*
 * BaseLock App Design Tokens
 * Single source of truth for all authenticated-page colors, spacing, and sizing.
 * Landing page (styles.css + .dark class) is NOT affected by this file.
 * Usage: html[data-theme="dark"] for dark mode; :root for light mode.
 */

/* Prevent transition flash on initial theme swap */
html:not([data-ready]) *,
html:not([data-ready]) *::before,
html:not([data-ready]) *::after {
  transition: none !important;
}

/* ─── Light Mode ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Brand */
  --bl-primary:       #151F94;   /* landing brand, unchanged */
  --bl-primary-hover: #0F1770;
  --bl-primary-soft:  #E8EAF8;   /* light-tint for active nav bg */
  --bl-accent:        #3B6EB9;   /* landing accent */

  /* Backgrounds */
  --bl-bg:            #FFFFFF;
  --bl-bg-secondary:  #F7F8FD;   /* landing bg */
  --bl-bg-tertiary:   #EEF0FF;
  --bl-surface:       #FFFFFF;   /* cards */
  --bl-surface-alt:   #F9FAFB;   /* input bg, zebra rows */

  /* Text */
  --bl-text:          #2E2F36;   /* baselock-black */
  --bl-text-secondary:#475569;
  --bl-text-muted:    #94A3B8;

  /* Borders */
  --bl-border:        #E2E8F0;
  --bl-border-light:  #F1F5F9;

  /* Semantic */
  --bl-success:       #10B981;
  --bl-warning:       #F59E0B;
  --bl-danger:        #EF4444;
  --bl-info:          #3B82F6;

  /* Shadows */
  --bl-shadow-sm:  0 1px 2px 0 rgb(21 31 148 / 0.04);
  --bl-shadow-md:  0 4px 12px -2px rgb(21 31 148 / 0.08);
  --bl-shadow-lg:  0 16px 32px -4px rgb(21 31 148 / 0.12);

  /* Border radius */
  --bl-radius-sm: 6px;
  --bl-radius-md: 10px;
  --bl-radius-lg: 14px;
  --bl-radius-xl: 20px;

  /* Typography */
  --bl-font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Shell dimensions */
  --bl-sidebar-w-expanded:  240px;
  --bl-sidebar-w-collapsed: 72px;
  --bl-topbar-h:            64px;

  /* Transition tokens */
  --bl-transition-fast: 0.15s ease;
  --bl-transition-base: 0.2s ease;

  /* Spacing scale (4px grid) */
  --bl-space-1:  4px;
  --bl-space-2:  8px;
  --bl-space-3:  12px;
  --bl-space-4:  16px;
  --bl-space-5:  20px;
  --bl-space-6:  24px;
  --bl-space-8:  32px;
  --bl-space-10: 40px;
  --bl-space-12: 48px;
  --bl-space-16: 64px;
}

/* ─── Dark Mode ──────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Brand — brightened for contrast on dark backgrounds */
  /* #8891FF on #0B0D1F = 4.9:1 — passes WCAG AA (was #6B78FF = 3.4:1, failed) */
  --bl-primary:       #8891FF;
  --bl-primary-hover: #9BA4FF;
  --bl-primary-soft:  rgb(136 145 255 / 0.14);

  /* Backgrounds */
  --bl-bg:            #0B0D1F;
  --bl-bg-secondary:  #121529;
  --bl-bg-tertiary:   #1A1E3A;
  --bl-surface:       #141832;
  --bl-surface-alt:   #1A1E3A;

  /* Text */
  --bl-text:          #F8FAFC;
  --bl-text-secondary:#CBD5E1;
  --bl-text-muted:    #64748B;

  /* Borders */
  --bl-border:        #263056;
  --bl-border-light:  #1A1E3A;

  /* Semantic — slightly adjusted for dark */
  --bl-success:       #34D399;
  --bl-warning:       #FBBF24;
  --bl-danger:        #F87171;
  --bl-info:          #60A5FA;

  /* Shadows — reduced opacity on dark */
  --bl-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.20);
  --bl-shadow-md:  0 4px 12px -2px rgb(0 0 0 / 0.30);
  --bl-shadow-lg:  0 16px 32px -4px rgb(0 0 0 / 0.40);
}