/* ============================================
   BUSINESS COMPUTER - DESIGN TOKENS
   Version: 3.11

   Framework-agnostic design tokens.
   This is the SINGLE SOURCE OF TRUTH for all
   Business Computer UI across any framework:
   Bootstrap, Tailwind, plain CSS, Blazor, React.

   Usage: Include this file FIRST, before any
   framework-specific adapter.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── Brand Colors (immutable across themes) ── */
  --bc-red: #CE212A;
  /* DEPRECATED: --bc-red-light (#E63946) fails WCAG 2.1 AA contrast on light backgrounds. Use --bc-red-light-accessible. Removed in v5.0 */
  --bc-red-light: #E63946;
  /* DEPRECATED: --bc-red-lighter (#FF6B73) fails WCAG 2.1 AA contrast. Use --bc-red-light-accessible. Removed in v5.0 */
  --bc-red-lighter: #FF6B73;
  --bc-red-dark: #A01A21;
  --bc-red-darker: #8A1719;

  --bc-gray: #363434;
  --bc-gray-light: #4A4848;
  --bc-gray-lighter: #6C6A6A;
  --bc-gray-dark: #2A2828;
  --bc-gray-darker: #1A1919;

  --bc-orange: #F16824;
  --bc-orange-light: #F4864E;
  --bc-orange-dark: #D65A1F;

  /* DEPRECATED: --bc-green (#54B848) fails WCAG 2.1 AA contrast on light backgrounds. Use --bc-green-accessible. Removed in v5.0 */
  --bc-green: #54B848;
  --bc-green-light: #6FCF63;
  --bc-green-dark: #469C3C;

  --bc-blue: #1E4484;
  --bc-blue-light: #2A5CAF;
  --bc-blue-dark: #183768;

  --bc-crimson: #B91C1C;
  --bc-crimson-light: #DC2626;
  --bc-crimson-dark: #991B1B;
  --bc-crimson-darker: #7F1D1D;

  /* ── Semantic Color Roles ── */
  --bc-color-primary: var(--bc-red);
  --bc-color-primary-hover: var(--bc-red-dark);
  --bc-color-primary-active: var(--bc-red-darker);
  --bc-color-secondary: var(--bc-gray);
  --bc-color-secondary-hover: var(--bc-gray-dark);
  --bc-color-success: var(--bc-green);
  --bc-color-success-hover: var(--bc-green-dark);
  --bc-color-warning: var(--bc-orange);
  --bc-color-warning-hover: var(--bc-orange-dark);
  --bc-color-info: var(--bc-blue);
  --bc-color-info-hover: var(--bc-blue-dark);
  --bc-color-danger: var(--bc-crimson);
  --bc-color-danger-hover: var(--bc-crimson-dark);
  --bc-color-danger-active: var(--bc-crimson-darker);

  /* ── Status Indicator Colors ── */
  --bc-status-active: var(--bc-green);
  --bc-status-inactive: var(--bc-text-muted);
  --bc-status-expired: var(--bc-crimson);
  --bc-status-warning: var(--bc-orange);
  --bc-status-info: var(--bc-blue);
  --bc-status-void: var(--bc-gray-lighter);

  /* ── Typography ── */
  --bc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bc-font-weight-regular: 400;
  --bc-font-weight-medium: 500;
  --bc-font-weight-semibold: 600;
  --bc-font-weight-bold: 700;

  --bc-text-xs: 0.75rem;
  --bc-text-sm: 0.875rem;
  --bc-text-base: 1rem;
  --bc-text-lg: 1.125rem;
  --bc-text-xl: 1.25rem;
  --bc-text-2xl: 1.5rem;
  --bc-text-3xl: 1.875rem;
  --bc-text-4xl: 2.25rem;

  --bc-leading-tight: 1.3;
  --bc-leading-normal: 1.6;
  --bc-leading-relaxed: 1.75;

  /* ── Spacing Scale ── */
  --bc-space-1: 0.25rem;
  --bc-space-2: 0.5rem;
  --bc-space-3: 0.75rem;
  --bc-space-4: 1rem;
  --bc-space-5: 1.25rem;
  --bc-space-6: 1.5rem;
  --bc-space-8: 2rem;
  --bc-space-10: 2.5rem;
  --bc-space-12: 3rem;
  --bc-space-16: 4rem;

  /* ── Border Radius ── */
  --bc-radius-sm: 0.25rem;
  --bc-radius-md: 0.375rem;
  --bc-radius-lg: 0.5rem;
  --bc-radius-xl: 0.75rem;
  --bc-radius-full: 9999px;

  /* ── Accessible Color Variants (WCAG 2.1 AA, >= 4.5:1) ── */
  --bc-green-accessible: #2E7D32;
  --bc-blue-accessible: #1E4484;
  --bc-red-light-accessible: #C62828;
  --bc-gray-accessible: #363434;

  /* ── Focus ── */
  --bc-focus-ring-offset: 2px;

  /* ── Transitions ── */
  --bc-transition-fast: 150ms ease;
  --bc-transition-base: 200ms ease-in-out;
  --bc-transition-slow: 300ms ease;
  --bc-transition-none: 0ms;

  /* ── Z-Index Scale ── */
  --bc-z-dropdown: 1000;
  --bc-z-sticky: 1020;
  --bc-z-fixed: 1030;
  --bc-z-modal-backdrop: 1040;
  --bc-z-modal: 1050;
  --bc-z-tooltip: 1060;
  --bc-z-toast: 1070;

  /* ── Animations ── */
  --bc-spin-speed: 0.6s;
  --bc-shimmer-speed: 1.5s;

  /* ── Avatar Sizes ── */
  --bc-avatar-sm: 1.5rem;
  --bc-avatar-md: 2.5rem;
  --bc-avatar-lg: 3rem;
  --bc-avatar-xl: 4rem;

  /* ── Progress Heights ── */
  --bc-progress-sm: 0.25rem;
  --bc-progress-md: 0.5rem;
  --bc-progress-lg: 0.75rem;

  /* ── Breakpoints (reference + JS access — cannot be used in @media) ── */
  --bc-breakpoint-sm: 576px;
  --bc-breakpoint-md: 768px;
  --bc-breakpoint-lg: 1024px;
  --bc-breakpoint-xl: 1280px;
  --bc-breakpoint-2xl: 1536px;
}

/* ── Light Theme (Default) ── */
:root,
[data-bc-theme="light"] {
  --bc-surface-base: #FFFFFF;
  --bc-surface-raised: #FFFFFF;
  --bc-surface-sunken: #F8F9FA;
  --bc-surface-overlay: #FFFFFF;
  --bc-surface-muted: #E9ECEF;

  --bc-text-primary: #363434;
  --bc-text-secondary: #6C757D;
  --bc-text-muted: #ADB5BD;
  --bc-text-inverse: #FFFFFF;
  --bc-text-on-primary: #FFFFFF;

  --bc-border-default: #DEE2E6;
  --bc-border-light: #E5E5E5;
  --bc-border-strong: #CED4DA;

  --bc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --bc-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.075);
  --bc-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --bc-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.12);
  --bc-shadow-primary: 0 4px 12px rgba(206, 33, 42, 0.25);
  --bc-shadow-danger: 0 4px 12px rgba(185, 28, 28, 0.25);

  --bc-focus-ring: 0 0 0 3px rgba(206, 33, 42, 0.25);
  --bc-focus-ring-info: 0 0 0 3px rgba(30, 68, 132, 0.15);

  /* ── Tinted Backgrounds (badges, indicators, subtle highlights) ── */
  --bc-tint-red: #FEF2F2;
  --bc-tint-green: #F0FDF4;
  --bc-tint-orange: #FFF7ED;
  --bc-tint-blue: #EFF6FF;
  --bc-tint-gray: #F3F4F6;
  --bc-tint-crimson: #FEF2F2;

  /* ── Interactive Surface ── */
  --bc-surface-hover: #F1F3F5;

  /* ── Component Tokens ── */
  --bc-table-header-bg: var(--bc-color-primary);
  --bc-table-header-text: var(--bc-text-on-primary);
  --bc-table-stripe-bg: var(--bc-surface-sunken);
  --bc-table-row-hover-bg: var(--bc-surface-hover);
  --bc-table-row-selected-bg: var(--bc-tint-blue);
  --bc-table-border: var(--bc-border-default);

  --bc-card-bg: var(--bc-surface-raised);
  --bc-card-border: var(--bc-border-light);
  --bc-card-header-bg: var(--bc-surface-sunken);

  --bc-kpi-trend-up: var(--bc-green);
  --bc-kpi-trend-down: var(--bc-crimson);
  --bc-kpi-trend-neutral: var(--bc-text-muted);

  --bc-toast-shadow: var(--bc-shadow-lg);

  --bc-modal-backdrop: rgba(0, 0, 0, 0.5);

  color-scheme: light;
}

/* ── Dark Theme ── */
[data-bc-theme="dark"] {
  --bc-surface-base: #1A1919;
  --bc-surface-raised: #2A2828;
  --bc-surface-sunken: #141313;
  --bc-surface-overlay: #363434;
  --bc-surface-muted: #3D3D3D;

  --bc-text-primary: #E9ECEF;
  --bc-text-secondary: #ADB5BD;
  --bc-text-muted: #868E96;  /* Fixed: was #6C757D (~3.8:1), now ~4.6:1 vs #1A1919 */
  --bc-text-inverse: #1A1919;
  --bc-text-on-primary: #FFFFFF;

  /* ── Accessible Color Variants (dark theme overrides) ── */
  --bc-green-accessible: #66BB6A;
  --bc-blue-accessible: #5B9BD5;
  --bc-red-light-accessible: #EF5350;
  --bc-gray-accessible: #9E9E9E;

  --bc-border-default: #3D3D3D;
  --bc-border-light: #4A4A4A;
  --bc-border-strong: #555555;

  --bc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --bc-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3);
  --bc-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --bc-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.4);
  --bc-shadow-primary: 0 4px 12px rgba(206, 33, 42, 0.35);
  --bc-shadow-danger: 0 4px 12px rgba(185, 28, 28, 0.35);

  --bc-focus-ring: 0 0 0 3px rgba(206, 33, 42, 0.4);
  --bc-focus-ring-info: 0 0 0 3px rgba(30, 68, 132, 0.3);

  /* ── Tinted Backgrounds (badges, indicators, subtle highlights) ── */
  --bc-tint-red: rgba(206, 33, 42, 0.15);
  --bc-tint-green: rgba(84, 184, 72, 0.15);
  --bc-tint-orange: rgba(241, 104, 36, 0.15);
  --bc-tint-blue: rgba(30, 68, 132, 0.25);
  --bc-tint-gray: rgba(108, 106, 106, 0.15);
  --bc-tint-crimson: rgba(185, 28, 28, 0.15);

  /* ── Interactive Surface ── */
  --bc-surface-hover: #333131;

  /* ── Component Tokens ── */
  --bc-table-header-bg: var(--bc-color-primary);
  --bc-table-header-text: var(--bc-text-on-primary);
  --bc-table-stripe-bg: var(--bc-surface-sunken);
  --bc-table-row-hover-bg: var(--bc-surface-hover);
  --bc-table-row-selected-bg: var(--bc-tint-blue);
  --bc-table-border: var(--bc-border-default);

  --bc-card-bg: var(--bc-surface-raised);
  --bc-card-border: var(--bc-border-light);
  --bc-card-header-bg: var(--bc-surface-sunken);

  --bc-kpi-trend-up: var(--bc-green);
  --bc-kpi-trend-down: var(--bc-crimson);
  --bc-kpi-trend-neutral: var(--bc-text-muted);

  --bc-toast-shadow: var(--bc-shadow-lg);

  --bc-modal-backdrop: rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

/* ── Base Reset (opt-in via .bc class or data-bc-theme) ── */
[data-bc-theme] {
  font-family: var(--bc-font-family);
  color: var(--bc-text-primary);
  background-color: var(--bc-surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--bc-transition-slow), color var(--bc-transition-slow);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  [data-bc-theme] {
    transition: none;
  }
}