/* -----------------------------------------------------------------------------
   This file contains all application-wide CSS custom properties (CSS variables).
   ----------------------------------------------------------------------------- */

/* Root CSS Custom Properties */
:root {
  /* Font stacks */
  --text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --text-font: Inter, ui-sans-serif, sans-serif, system-ui;
  --code-font-stack: 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace;

  /* Font weights */
  --font-thin: 100;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-super-bold: 900;

  /* Color palette */
  --color-white: #fff;
  --color-black: #000;
  --color-light-grey-light: #f5f6fa;
  --color-light-grey-medium: #f0f0f0;
  --color-light-grey-dark: #e5e6eb;

  --color-dark-grey: #141414;
  --color-dark-grey-dark: #292929;
  --color-dark-grey-medium: #404040;
  --color-dark-grey-light: #4D4D4D;

  --color-dark-blue: #0b1730;
  --color-dark-blue-light: #202d4a;
  --color-dark-blue-medium: #182341;
  --color-dark-blue-dark: #050a16;

  /* Base URL for assets */
  --base-url: '/assets/';

  /* Breakpoints (for reference, used in media queries) */
  /* small: 320px */
  /* medium: 768px */
  /* large: 1024px */

  /* ==========================================================================
     DESIGN TOKENS - Spacing
     ========================================================================== */

  /* Spacing scale (following Tailwind spacing) */
  --spacing-1: 0.25rem;    /* 4px */
  --spacing-2: 0.5rem;     /* 8px */
  --spacing-3: 0.75rem;    /* 12px */
  --spacing-4: 1rem;       /* 16px */
  --spacing-5: 1.25rem;    /* 20px */
  --spacing-6: 1.5rem;     /* 24px */
  --spacing-8: 2rem;       /* 32px */
  --spacing-10: 2.5rem;    /* 40px */
  --spacing-12: 3rem;      /* 48px */

  /* Common spacing aliases */
  --spacing-xs: var(--spacing-1);
  --spacing-sm: var(--spacing-2);
  --spacing-md: var(--spacing-3);
  --spacing-lg: var(--spacing-4);
  --spacing-xl: var(--spacing-6);
  --spacing-2xl: var(--spacing-8);

  /* ==========================================================================
     DESIGN TOKENS - Border Radius
     ========================================================================== */

  --border-radius-none: 0;
  --border-radius-xs: 0.125rem;   /* 2px */
  --border-radius-sm: 0.25rem;    /* 4px */
  --border-radius-md: 0.375rem;   /* 6px - Most common */
  --border-radius-lg: 0.5rem;     /* 8px */
  --border-radius-xl: 0.75rem;    /* 12px */
  --border-radius-2xl: 1rem;      /* 16px */
  --border-radius-10px: 0.625rem; /* 10px */
  --border-radius-full: 9999px;

  /* ==========================================================================
     DESIGN TOKENS - Font Sizes
     ========================================================================== */

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */

  /* ==========================================================================
     DESIGN TOKENS - Line Heights
     ========================================================================== */

  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* ==========================================================================
     DESIGN TOKENS - Shadows
     ========================================================================== */

  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 8px 10px -1px rgb(0 0 0 / 0.1);

  /* Focus ring shadows */
  --shadow-focus-ring: 0 0 0 3px oklch(from var(--ring) l c h / 0.1);
  --shadow-focus-ring-error: 0 0 0 3px oklch(from var(--destructive) l c h / 0.1);

  /* ==========================================================================
     DESIGN TOKENS - Transitions
     ========================================================================== */

  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.2s ease-in-out;
  --transition-slow: 0.3s ease-in-out;

  /* ==========================================================================
     DESIGN TOKENS - Z-Index Scale
     ========================================================================== */

  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1080;

  /* ==========================================================================
     DESIGN TOKENS - Component Specific
     ========================================================================== */

  /* Form inputs */
  --input-height: 2.25rem;        /* 36px */
  --input-height-lg: 2.5rem;      /* 40px */
  --input-padding-x: var(--spacing-3);
  --input-padding-y: var(--spacing-2);

  /* Buttons */
  --button-height: 2.25rem;       /* 36px */
  --button-padding-x: var(--spacing-4);
  --button-padding-y: var(--spacing-2);

  /* Cards */
  --card-padding: var(--spacing-4);
  --card-border-width: 1px;

  /* Modal/Dialog */
  --modal-backdrop-bg: rgb(0 0 0 / 0.5);
  --modal-border-radius: var(--border-radius-xl);

  /* Sidebar */
  --sidebar-width: 16rem;         /* 256px */
  --sidebar-width-collapsed: 4rem; /* 64px */

  /* ==========================================================================
     DESIGN TOKENS - Badge Colors
     ========================================================================== */

  /* Badge color palette - semantic colors for status indicators */
  --badge-primary-bg: rgba(59, 130, 246, 0.15);
  --badge-primary-color: rgb(59, 130, 246);
  
  --badge-secondary-bg: rgba(14, 165, 233, 0.15);
  --badge-secondary-color: rgb(14, 165, 233);
  
  --badge-success-bg: rgba(34, 197, 94, 0.15);
  --badge-success-color: rgb(34, 197, 94);
  
  --badge-warning-bg: rgba(245, 158, 11, 0.15);
  --badge-warning-color: rgb(245, 158, 11);
  
  --badge-danger-bg: rgba(239, 68, 68, 0.15);
  --badge-danger-color: rgb(239, 68, 68);
  
  --badge-info-bg: rgba(59, 130, 246, 0.15);
  --badge-info-color: rgb(59, 130, 246);
  
  --badge-purple-bg: rgba(139, 92, 246, 0.15);
  --badge-purple-color: rgb(139, 92, 246);

  --badge-gray-bg: rgba(156, 163, 175, 0.15);
  --badge-gray-color: rgb(156, 163, 175);

  /* Additional badge colors using chart colors for better differentiation */
  --badge-chart-1-bg: rgba(129, 140, 248, 0.15);
  --badge-chart-1-color: rgb(129, 140, 248);

  --badge-chart-2-bg: rgba(99, 102, 241, 0.15);
  --badge-chart-2-color: rgb(99, 102, 241);

  --badge-chart-3-bg: rgba(88, 28, 135, 0.15);
  --badge-chart-3-color: rgb(88, 28, 135);

  --badge-chart-4-bg: rgba(79, 70, 229, 0.15);
  --badge-chart-4-color: rgb(79, 70, 229);

  --badge-chart-5-bg: rgba(67, 56, 202, 0.15);
  --badge-chart-5-color: rgb(67, 56, 202);

  /* ==========================================================================
     DESIGN TOKENS - Email
     ========================================================================== */

  --email-link-color: #15c;
  --email-attachment-orange-bg: rgba(255, 152, 0, 0.1);
  --email-attachment-orange-fg: #ff9800;
  --email-attachment-red-bg: rgba(244, 67, 54, 0.1);
  --email-attachment-red-fg: #f44336;
  --email-attachment-green-bg: rgba(76, 175, 80, 0.1);
  --email-attachment-green-fg: #4caf50;
  --email-attachment-blue-bg: rgba(33, 150, 243, 0.1);
  --email-attachment-blue-fg: #2196f3;

  /* Legacy sidebar palette (migration helper) */
  --sidebar-ui-muted: #b8c7ce;
  --sidebar-ui-border: #d2d6de;
  --sidebar-ui-bg: #f9fafc;
  --sidebar-ui-bg-hover: #e8ecf4;
  --sidebar-ui-bg-active: #eff1f7;
  --sidebar-ui-neutral: #f4f4f5;
  --sidebar-ui-panel-border: #efefef;
  --sidebar-ui-dark-bg: #222d32;
  --sidebar-ui-dark-bg-hover: #1e282c;
  --sidebar-ui-dark-tab-bg: #181f23;
  --sidebar-ui-dark-tab-border: #141a1d;
  --sidebar-ui-dark-tab-active: #1c2529;

  /* Navigation and dashboard migration helpers */
  --nav-search-bg: rgb(255 255 255 / 0.2);
  --nav-search-bg-focus: rgb(255 255 255 / 0.9);
  --nav-search-border-focus: rgb(0 0 0 / 0.1);
  --surface-shadow-subtle: 0 1px 1px rgb(0 0 0 / 0.1);

  /* Legacy nav/funnel palette (migration helper) */
  --nav-ui-primary: #5390f4;
  --nav-ui-primary-hover: #6696fb;
  --nav-ui-pill-active: #3c8dbc;
  --nav-ui-info: #00c0ef;
  --nav-ui-danger: #dd4b39;
  --nav-ui-warning: #f39c12;
  --nav-ui-success: #00a65a;
  --nav-ui-badge: #a0bce4;

  --funnel-stage-leads: #007bff;
  --funnel-stage-qualified: #28a745;
  --funnel-stage-opportunities: #ffc107;
  --funnel-stage-proposals: #dc3545;
  --funnel-stage-customers: #6c757d;
  --funnel-stage-alt-customers: #6f42c1;
  --funnel-base-bg: #e9ecef;
  --funnel-progress-overlay: rgb(255 255 255 / 0.35);

  --metric-positive-color: #10b981;
  --metric-positive-bg: rgb(16 185 129 / 0.1);
  --metric-negative-color: #ef4444;
  --metric-negative-bg: rgb(239 68 68 / 0.1);

  --app-card-sales-start: #10b981;
  --app-card-sales-end: #059669;
  --app-card-finance-start: #f59e0b;
  --app-card-finance-end: #d97706;
  --app-card-inventory-start: #8b5cf6;
  --app-card-inventory-end: #7c3aed;

  /* Legacy component migration helpers */
  --ui-text-secondary: #768191;
  --ui-text-muted: #9fa9ba;
  --ui-drop-hover-bg: #c4cad6;
  --ui-danger-soft-bg: rgb(239 68 68 / 0.15);
  --ui-muted-soft-bg: rgb(107 114 128 / 0.15);
  --ui-accent-soft-bg: rgb(55 53 47 / 0.06);
  --ui-accent-soft-bg-hover: rgb(55 53 47 / 0.12);
  --ui-focus-ring: rgb(59 130 246 / 0.6);
}