/* ==========================================================================
   FinBillx Design Tokens & Theme Variables
   Exact 1:1 Mirror of FinBillx App (src/styles.scss)
   ========================================================================== */

:root {
  /* Brand logo accent — the dot color used in sidebar & login */
  --fb-logo-dot: #1935d0;
  --fb-logo-badge-bg: #101720;

  /* Brand / Primary — dark charcoal (#101720), white foreground */
  --fb-primary: #101720;
  --fb-primary-hover: #000000;
  --fb-primary-light: #F3F4F6;
  --fb-primary-dark: #101720;
  --fb-primary-fg: #FFFFFF;

  /* Status — Success */
  --fb-success: #059669;
  --fb-success-bg: #D1FAE5;
  --fb-success-fg: #065F46;

  /* Status — Warning */
  --fb-warning: #D97706;
  --fb-warning-bg: #FEF3C7;
  --fb-warning-fg: #92400E;

  /* Status — Danger */
  --fb-danger: #DC2626;
  --fb-danger-bg: #FEE2E2;
  --fb-danger-fg: #991B1B;

  /* Status — Draft / Neutral */
  --fb-neutral: #6B7280;
  --fb-neutral-bg: #F3F4F6;
  --fb-neutral-fg: #374151;

  /* Accent — Purple */
  --fb-accent-purple: #6366f1;
  --fb-accent-purple-bg: #eef2ff;
  --fb-accent-purple-fg: #3730a3;

  /* Text hierarchy */
  --fb-text-primary: #111827;
  --fb-text-secondary: #374151;
  --fb-text-muted: #6B7280;
  --fb-text-placeholder: #9CA3AF;
  --fb-text-disabled: #D1D5DB;
  --fb-text-inverse: #FFFFFF;
  --fb-text-link: #111827;

  /* Backgrounds */
  --fb-bg-page: #F9FAFB;
  --fb-bg-card: #FFFFFF;
  --fb-bg-sidebar: #FFFFFF;
  --fb-bg-hover: #F3F4F6;
  --fb-bg-overlay: rgba(17, 24, 39, 0.4);
  --fb-bg-glass: rgba(255, 255, 255, 0.95);

  /* Borders */
  --fb-border: #E5E7EB;
  --fb-border-light: #F3F4F6;
  --fb-border-strong: #D1D5DB;
  --fb-border-focus: #111827;

  /* Shadows */
  --fb-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --fb-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.10);
  --fb-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15);
  --fb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

  /* Typography */
  --fb-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fb-font-size-xs: 12px;
  --fb-font-size-sm: 13px;
  --fb-font-size-base: 14px;
  --fb-font-size-md: 16px;
  --fb-font-size-lg: 18px;
  --fb-font-size-xl: 22px;
  --fb-font-size-2xl: 28px;
  --fb-font-size-3xl: 38px;
  --fb-font-size-4xl: 46px;

  --fb-font-weight-normal: 400;
  --fb-font-weight-medium: 500;
  --fb-font-weight-semibold: 600;
  --fb-font-weight-bold: 700;

  /* Border radius */
  --fb-radius-sm: 6px;
  --fb-radius-md: 12px;
  --fb-radius-lg: 14px;
  --fb-radius-xl: 20px;
  --fb-radius-full: 9999px;

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

  --fb-transition-fast: 0.15s ease;
  --fb-transition-normal: 0.25s ease;
  --fb-container-max: 1140px;
}

/* ==========================================================================
   Dark Theme (Exact App Dark Theme)
   ========================================================================== */
[data-theme='dark'] {
  color-scheme: dark;

  --fb-primary: #93c5fd;
  --fb-primary-hover: #bfdbfe;
  --fb-primary-light: #1e3a5f;
  --fb-primary-dark: #93c5fd;
  --fb-primary-fg: #111827;

  --fb-logo-dot: #60a5fa;
  --fb-logo-badge-bg: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);

  --fb-success: #34d399;
  --fb-success-bg: rgba(16, 185, 129, 0.16);
  --fb-success-fg: #34d399;

  --fb-warning: #fbbf24;
  --fb-warning-bg: rgba(245, 158, 11, 0.16);
  --fb-warning-fg: #fbbf24;

  --fb-danger: #f87171;
  --fb-danger-bg: rgba(239, 68, 68, 0.16);
  --fb-danger-fg: #f87171;

  --fb-neutral-bg: #374151;
  --fb-neutral-fg: #d1d5db;

  --fb-accent-purple-bg: #1e1b4b;
  --fb-accent-purple-fg: #c7d2fe;
  --fb-accent-purple: #818cf8;

  --fb-text-primary: #f9fafb;
  --fb-text-secondary: #e5e7eb;
  --fb-text-muted: #9ca3af;
  --fb-text-placeholder: #6b7280;
  --fb-text-disabled: #4b5563;
  --fb-text-link: #93c5fd;

  --fb-bg-page: #111827;
  --fb-bg-card: #1f2937;
  --fb-bg-sidebar: #1f2937;
  --fb-bg-hover: #374151;
  --fb-bg-overlay: rgba(0, 0, 0, 0.55);
  --fb-bg-glass: rgba(31, 41, 55, 0.95);

  --fb-border: #374151;
  --fb-border-light: #2d3748;
  --fb-border-strong: #4b5563;

  --fb-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
  --fb-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.55);
}