/* Source: bundled product-tokens.css */
:root {
  /* ============================================
     DESIGN SYSTEM TOKENS - Kinter
     Brand: Lime Green (#E0FE5D) on Dark
     ============================================ */

  /* Font Families */
  --font-sans: "Instrument Sans", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "Instrument Sans", monospace;

  /* Colors - Dark Theme Core */
  --color-background: #1f1b19;
  --color-foreground: #fafafa;
  --color-card: #252220;
  --color-card-foreground: #fafafa;
  --color-popover: #252220;
  --color-popover-foreground: #fafafa;
  --color-primary: #e0fe5d;
  --color-primary-hover: #cced3f;
  --color-primary-foreground: #000000;
  --color-secondary: #2d1a14;
  --color-secondary-foreground: #fafafa;
  --color-muted: #2d2623;
  --color-muted-foreground: #a1a1aa;
  --color-accent: #2d2623;
  --color-accent-foreground: #fafafa;
  --color-destructive: #ef4444;
  --color-destructive-foreground: #fafafa;
  --color-border: #3a3532;
  --color-input: #3a3532;
  --color-ring: #e0fe5d;

  /* Text Colors - Semantic (USE THESE!) */
  --color-text-primary: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #71717a;
  --color-text-disabled: #52525b;

  /* Surface Colors */
  --color-surface-0: #1f1b19;
  --color-surface-1: #252220;
  --color-surface-2: #2d2623;
  --color-surface-3: #3a3532;
  --color-surface-hover: #3a3532;

  /* Border Colors */
  --color-border-default: #3a3532;
  --color-border-subtle: #2d2623;
  --color-border-strong: #4a4542;
  --color-border-button: rgba(252, 250, 248, 0.2);

  /* Success/Warning/Error colors */
  --color-success: #22c55e;
  --color-success-foreground: #fafafa;
  --color-success-muted: #166534;
  --color-warning: #eab308;
  --color-warning-foreground: #0a0a0a;
  --color-warning-muted: #854d0e;
  --color-error: #ef4444;
  --color-error-foreground: #fafafa;
  --color-error-muted: #991b1b;

  /* Brand Color - Kinter Lime Green */
  --color-brand: #e0fe5d;
  --color-brand-foreground: #000000;
  --color-brand-muted: rgba(224, 254, 93, 0.15);

  /* Accent Colors - For highlights and badges */
  --color-emerald: #10b981;
  --color-emerald-muted: rgba(16, 185, 129, 0.15);
  --color-blue: #3b82f6;
  --color-blue-muted: rgba(59, 130, 246, 0.15);
  --color-purple: #8b5cf6;
  --color-purple-muted: rgba(139, 92, 246, 0.15);
  --color-amber: #f59e0b;
  --color-amber-muted: rgba(245, 158, 11, 0.15);

  /* ============================================
     STATUS COLORS - Semantic workflow states
     Use these instead of hardcoded emerald/red/yellow
     ============================================ */

  /* Status: Not Started / Pending */
  --color-status-pending: #fbbf24;
  --color-status-pending-muted: rgba(251, 191, 36, 0.15);

  /* Status: In Progress */
  --color-status-progress: #3b82f6;
  --color-status-progress-muted: rgba(59, 130, 246, 0.15);

  /* Status: Completed / Approved / Matched */
  --color-status-success: #22c55e;
  --color-status-success-muted: rgba(34, 197, 94, 0.15);

  /* Status: Blocked / Rejected / Error */
  --color-status-error: #ef4444;
  --color-status-error-muted: rgba(239, 68, 68, 0.15);

  /* Status: AI Suggestion / Info */
  --color-status-ai: #a855f7;
  --color-status-ai-muted: rgba(168, 85, 247, 0.15);

  /* Status: Viewed / Info (purple) */
  --color-status-info: #8b5cf6;
  --color-status-info-muted: rgba(139, 92, 246, 0.15);

  /* Status: Partial / In-Between (orange) */
  --color-status-partial: #f97316;
  --color-status-partial-muted: rgba(249, 115, 22, 0.15);

  /* Status: Scheduled / Queued (cyan) */
  --color-status-scheduled: #06b6d4;
  --color-status-scheduled-muted: rgba(6, 182, 212, 0.15);

  /* Status: Inactive / Canceled / Void (gray) */
  --color-status-inactive: #6b7280;
  --color-status-inactive-muted: rgba(107, 114, 128, 0.15);

  /* Variance Colors - For financial variances */
  --color-variance-positive: #22c55e;
  --color-variance-negative: #ef4444;
  --color-variance-neutral: #a1a1aa;

  /* Confidence Levels - For AI match confidence scores */
  --color-confidence-high: #84cc16;
  --color-confidence-medium: #fb923c;
  --color-confidence-low: #ef4444;
  --color-confidence-high-muted: rgba(132, 204, 22, 0.15);
  --color-confidence-medium-muted: rgba(251, 146, 60, 0.15);
  --color-confidence-low-muted: rgba(239, 68, 68, 0.15);

  /* Priority Colors - For task priorities */
  --color-priority-high: #fb923c;

  /* Account Link Color */
  --color-account-link: #22d3ee;

  /* Chart colors */
  --color-chart-1: #3b82f6;
  --color-chart-2: #22c55e;
  --color-chart-3: #f59e0b;
  --color-chart-4: #8b5cf6;
  --color-chart-5: #ec4899;

  /* ============================================
     TYPOGRAPHY SCALE
     ============================================ */

  /* Font Sizes - Extended scale for design system */
  --font-size-3xs: 0.5rem; /* 8px - avatar fallbacks */
  --font-size-2xs: 0.625rem; /* 10px - micro labels */
  --font-size-micro: 0.6875rem; /* 11px - column headers, badges */
  --font-size-xs: 0.75rem; /* 12px - labels, captions */
  --font-size-xs-plus: 0.8125rem; /* 13px - sidebar nav, small body */
  --font-size-sm: 0.875rem; /* 14px - body, inputs */
  --font-size-md: 0.9375rem; /* 15px - emphasized body */
  --font-size-base: 1rem; /* 16px - default body */
  --font-size-lg: 1.125rem; /* 18px - subheadings */
  --font-size-xl: 1.1875rem; /* 19px - section headers */
  --font-size-2xl: 1.5rem; /* 24px - page headings */
  --font-size-3xl: 1.875rem; /* 30px - hero/page titles */

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* ============================================
     SPACING SCALE (4px base)
     ============================================ */

  --space-0: 0;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */

  /* ============================================
     RADIUS SCALE (subtle rounded corners per Figma)
     ============================================ */

  --radius-sm: 2px; /* Subtle rounding */
  --radius-md: 3px; /* Default rounding */
  --radius-lg: 3px; /* Larger rounding */
  --radius-xl: 3px; /* Extra large */
  --radius-2xl: 3px; /* 2x extra large */

  /* ============================================
     COMPONENT SIZES
     ============================================ */

  /* Sheet/Drawer widths */
  --sheet-sm: 24rem; /* 384px - small forms */
  --sheet-md: 32rem; /* 512px - default forms */
  --sheet-lg: 40rem; /* 640px - complex forms */
  --sheet-xl: 48rem; /* 768px - large editors */

  /* Input heights */
  --input-sm: 2rem; /* 32px - compact */
  --input-md: 2.25rem; /* 36px - default */
  --input-lg: 2.5rem; /* 40px - large */

  /* Button heights (same as input) */
  --button-sm: 2rem; /* 32px */
  --button-md: 2.25rem; /* 36px */
  --button-lg: 2.5rem; /* 40px */

  /* Sidebar */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;

  /* ============================================
     PAGE LAYOUT TOKENS (Figma design specs)
     ============================================ */

  /* Page container padding */
  --spacing-page-x: 1.125rem; /* 18px horizontal */
  --spacing-page-y: 0.75rem; /* 12px vertical */

  /* Page title typography */
  --font-size-page-title: 1.875rem; /* 30px */
  --line-height-page-title: 1.2;

  /* ============================================
     SHADOWS
     ============================================ */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-glow-sm: 0 0 10px rgba(255, 255, 255, 0.05);
  --shadow-glow-md: 0 0 20px rgba(255, 255, 255, 0.1);

  /* Premium Glow Effects - Lime Green */
  --shadow-glow-lime-sm: 0 0 15px rgba(224, 254, 93, 0.15);
  --shadow-glow-lime-md: 0 0 30px rgba(224, 254, 93, 0.2);
  --shadow-glow-lime-lg: 0 0 60px rgba(224, 254, 93, 0.25);
  --shadow-glow-lime-intense: 0 0 40px rgba(224, 254, 93, 0.4), 0 0 80px rgba(224, 254, 93, 0.2);

  /* Premium Inner Glow */
  --shadow-inner-glow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  --shadow-inner-glow-lime: inset 0 0 20px rgba(224, 254, 93, 0.05);

  /* ============================================
     Z-INDEX SCALE
     ============================================ */

  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal: 200;
  --z-popover: 300;
  --z-tooltip: 400;
  --z-toast: 500;

  /* Topbar tokens */
  --color-topbar-bg: #100f0e;
  --color-topbar-surface: rgba(252, 250, 248, 0.1);
  --color-topbar-surface-hover: rgba(252, 250, 248, 0.15);
  --color-topbar-surface-muted: rgba(252, 250, 248, 0.2);
  --color-topbar-text: #ffffff;
  --color-topbar-border: rgba(252, 250, 248, 0.1);

  /* Dashboard shell background (frame around content) */
  --color-shell-bg: var(--color-background);
}
.light {
  /* Colors - Light Theme Core (Clean, minimal palette) */
  --color-background: #fafafa;
  --color-foreground: #0a0a0a;
  --color-card: #ffffff;
  --color-card-foreground: #0a0a0a;
  --color-popover: #ffffff;
  --color-popover-foreground: #0a0a0a;
  /* Primary: Lime green */
  --color-primary: #e0fe5d;
  --color-primary-hover: #cced3f;
  --color-primary-foreground: #000000;
  --color-secondary: #f5f5f5;
  --color-secondary-foreground: #171717;
  --color-muted: #f5f5f5;
  --color-muted-foreground: #737373;
  --color-accent: #f5f5f5;
  --color-accent-foreground: #0a0a0a;
  --color-destructive: #dc2626;
  --color-destructive-foreground: #fafafa;
  --color-border: #e5e5e5;
  --color-input: #e5e5e5;
  --color-ring: #e0fe5d;

  /* Text Colors - Light Theme */
  --color-text-primary: #0a0a0a;
  --color-text-secondary: #525252;
  --color-text-muted: #737373;
  --color-text-disabled: #a3a3a3;

  /* Surface Colors - Light Theme */
  --color-surface-0: #fafafa;
  --color-surface-1: #ffffff;
  --color-surface-2: #f5f5f5;
  --color-surface-3: #e5e5e5;
  --color-surface-hover: #f5f5f5;

  /* Border Colors - Light Theme */
  --color-border-default: #e5e5e5;
  --color-border-subtle: rgba(0, 0, 0, 0.2);
  --color-border-strong: #d4d4d4;
  --color-border-button: rgba(11, 10, 10, 0.2);

  /* Success/Warning/Error - Light Theme */
  --color-success: #16a34a;
  --color-success-foreground: #fafafa;
  --color-success-muted: #dcfce7;
  --color-warning: #ca8a04;
  --color-warning-foreground: #0a0a0a;
  --color-warning-muted: #fef9c3;
  --color-error: #dc2626;
  --color-error-foreground: #fafafa;
  --color-error-muted: #fee2e2;

  /* Brand - Lime for Light Mode */
  --color-brand: #e0fe5d;
  --color-brand-foreground: #000000;
  --color-brand-muted: rgba(224, 254, 93, 0.15);

  /* Shadows - Light Theme with subtle lime glow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-glow-sm: 0 0 0 1px rgba(224, 254, 93, 0.2);
  --shadow-glow-md: 0 0 0 2px rgba(224, 254, 93, 0.15), 0 4px 12px rgba(224, 254, 93, 0.1);

  /* Premium Glow Effects - Lime for Light Mode */
  --shadow-glow-lime-sm: 0 2px 8px rgba(224, 254, 93, 0.2);
  --shadow-glow-lime-md: 0 4px 16px rgba(224, 254, 93, 0.25);
  --shadow-glow-lime-lg: 0 8px 32px rgba(224, 254, 93, 0.3);
  --shadow-glow-lime-intense: 0 4px 20px rgba(224, 254, 93, 0.4), 0 0 0 1px rgba(224, 254, 93, 0.2);

  /* Topbar tokens - Keep dark even in Light Theme (per Figma) */
  --color-topbar-bg: #100f0e;
  --color-topbar-surface: rgba(252, 250, 248, 0.1);
  --color-topbar-surface-hover: rgba(252, 250, 248, 0.15);
  --color-topbar-surface-muted: rgba(252, 250, 248, 0.2);
  --color-topbar-text: #ffffff;
  --color-topbar-border: rgba(252, 250, 248, 0.1);

  /* Dashboard shell background - current Kinter light frame */
  --color-shell-bg: #f7f6f6;
}