/* ================================
   Daylete Design System - Theme Tokens
   Linear.app-inspired design system
   ================================ */

:root {
  /* ================================
     Brand Colors (Non-negotiable)
     ================================ */
  --primary: #0061A0;
  --primary-boost: #4DA8DA;
  --accent-orange: #F97316;
  
  /* ================================
     Semantic Colors
     ================================ */
  --success: #3FB950;
  --warning: #F59E0B;
  --danger: #F85149;
  --info: #0ea5e9;
  
  /* ================================
     Focus & Interaction
     ================================ */
  --focus: #4DA8DA55;
  --focus-ring: 0 0 0 3px var(--focus);
  
  /* ================================
     Radius Scale
     ================================ */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  /* ================================
     Spacing Scale
     ================================ */
  --gap-1: 8px;
  --gap-2: 12px;
  --gap-3: 16px;
  --gap-4: 24px;
  --gap-5: 32px;
  --gap-6: 48px;
  --gap-7: 64px;
  --gap-8: 80px;
  
  /* ================================
     Shadows
     ================================ */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-4: 0 16px 48px rgba(0, 0, 0, 0.15);
  --shadow-focus: 0 0 0 3px var(--focus);
  
  /* ================================
     Typography
     ================================ */
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Roboto', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;
  
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.625;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* ================================
     Transitions
     ================================ */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ================================
     Z-Index Scale
     ================================ */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}

/* ================================
   Light Theme
   ================================ */
[data-theme="light"] {
  /* Backgrounds */
  --bg-0: #FFFFFF;
  --bg-1: #F9FAFB;
  --bg-2: #F3F4F6;
  --bg-3: #E5E7EB;
  
  /* Borders */
  --border-1: #E5E7EB;
  --border-2: #D1D5DB;
  --border-3: #9CA3AF;
  
  /* Text Colors */
  --text-1: #111827;
  --text-2: #374151;
  --text-3: #6B7280;
  --text-4: #9CA3AF;
  
  /* Interactive States */
  --surface-hover: rgba(0, 0, 0, 0.02);
  --surface-active: rgba(0, 0, 0, 0.04);
  --surface-selected: rgba(6, 97, 160, 0.08);
  
  /* Component Specific */
  --navbar-bg: rgba(255, 255, 255, 0.8);
  --navbar-border: var(--border-1);
  --card-bg: var(--bg-0);
  --input-bg: var(--bg-0);
  --input-border: var(--border-2);
  --table-stripe: var(--bg-1);
  
  /* Shadows with light theme adjustments */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-4: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* ================================
   Dark Theme
   ================================ */
   [data-theme="dark"] {
      /* Backgrounds — inky, neutral blacks */
      --bg-0: #0B0B0B;  /* page background */
      --bg-1: #111111;  /* panels / header */
      --bg-2: #1A1A1A;  /* cards / inputs */
      --bg-3: #222222;  /* deeper surfaces */
    
      /* Borders — neutral grays (no blue cast) */
      --border-1: #242424;
      --border-2: #2E2E2E;
      --border-3: #383838;
    
      /* Text Colors (keep your legible neutrals) */
      --text-1: #E6E7EB;  /* primary */
      --text-2: #A5ACB8;  /* secondary */
      --text-3: #6B7280;  /* tertiary */
      --text-4: #4B5563;  /* quaternary */
    
      /* Interactive States — subtle, matte on black */
      --surface-hover: rgba(255, 255, 255, 0.03);
      --surface-active: rgba(255, 255, 255, 0.06);
      /* use your brand boost color for selection tint if desired */
      --surface-selected: rgba(77, 168, 218, 0.16);
    
      /* Component Specific */
      --navbar-bg: rgba(11, 11, 11, 0.85); /* inky glass */
      --navbar-border: var(--border-1);
      --card-bg: var(--bg-2);
      --input-bg: var(--bg-2);
      --input-border: var(--border-2);
      --table-stripe: var(--bg-2);
    
      /* Softer shadows on dark (avoid gray haze) */
      --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.25);
      --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.22);
      --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.26);
      --shadow-4: 0 16px 48px rgba(0, 0, 0, 0.30);
    }

    

/* ================================
   Bootstrap Integration
   ================================ */
[data-theme="light"] {
  --bs-primary: var(--primary);
  --bs-primary-rgb: 0, 97, 160;
  --bs-secondary: var(--primary-boost);
  --bs-secondary-rgb: 77, 168, 218;
  --bs-success: var(--success);
  --bs-info: var(--info);
  --bs-warning: var(--warning);
  --bs-danger: var(--danger);
  --bs-body-bg: var(--bg-0);
  --bs-body-color: var(--text-1);
  --bs-border-color: var(--border-1);
}

[data-theme="dark"] {
  --bs-primary: var(--primary-boost);
  --bs-primary-rgb: 77, 168, 218;
  --bs-secondary: var(--primary);
  --bs-secondary-rgb: 0, 97, 160;
  --bs-success: var(--success);
  --bs-info: var(--info);
  --bs-warning: var(--warning);
  --bs-danger: var(--danger);
  --bs-body-bg: var(--bg-0);
  --bs-body-color: var(--text-1);
  --bs-border-color: var(--border-1);
}

/* ================================
   Reduced Motion Support
   ================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-base: 0s;
    --transition-slow: 0s;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================
   High Contrast Mode Support
   ================================ */
@media (prefers-contrast: high) {
  :root {
    --border-1: #000000;
    --border-2: #000000;
    --border-3: #000000;
  }
  
  [data-theme="dark"] {
    --border-1: #FFFFFF;
    --border-2: #FFFFFF;
    --border-3: #FFFFFF;
  }
}