/* ============================================
   BUSINESS COMPUTER - DESIGN TOKENS
   Version: 3.0
   
   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;
  --bc-red-light: #E63946;
  --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;

  --bc-green: #54B848;
  --bc-green-light: #6FCF63;
  --bc-green-dark: #469C3C;

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

  /* ── 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-red);
  --bc-color-danger-hover: var(--bc-red-dark);

  /* ── 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;

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

  /* ── 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;
}

/* ── 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-focus-ring: 0 0 0 3px rgba(206, 33, 42, 0.25);

  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: #6C757D;
  --bc-text-inverse: #1A1919;
  --bc-text-on-primary: #FFFFFF;

  --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-focus-ring: 0 0 0 3px rgba(206, 33, 42, 0.4);

  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);
}