/* AI-NOTE: Design Token System - Single source of truth for all design values */
/* This file should be imported FIRST in base.html before other CSS files */

:root {
  /* ========================================
     COLOR PALETTE TOKENS
     Note: --primary-color and --secondary-color are set dynamically
     in base.html from tenant branding. These are the fixed semantic palette.
     ======================================== */

  /* Blue scale */
  --color-blue-50:  #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;

  /* Green / Success scale */
  --color-green-50:  #ecfdf5;
  --color-green-100: #d1fae5;
  --color-green-500: #10b981;
  --color-green-600: #059669;
  --color-green-900: #064e3b;

  /* Amber / Warning scale */
  --color-amber-50:  #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fdba74;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;

  /* Red / Danger scale */
  --color-red-50:  #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-900: #7f1d1d;

  /* Purple scale */
  --color-purple-50:  #f3f0ff;
  --color-purple-100: #e0d7ff;
  --color-purple-500: #7c5cff;
  --color-purple-600: #6d4fe6;

  /* Slate / Neutral scale */
  --color-slate-50:  #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  /* ========================================
     SEMANTIC COLOR TOKENS
     Static defaults — dynamic brand colors (--primary-color, --secondary-color,
     --body-bg, --sidebar-bg, etc.) are injected inline in base.html from tenant branding.
     ======================================== */

  /* Primary hover/light/dark variants (defaults; overridden by branding injection) */
  --primary-hover: #d12023;
  --primary-light: rgba(235, 36, 40, 0.1);
  --primary-dark:  #b81c1f;
  --secondary-hover: #6f6f6f;
  --secondary-light: rgba(132, 132, 132, 0.1);

  /* Semantic: Success */
  --success-color: #10b981;
  --success-light: #ecfdf5;
  --success-dark:  #065f46;

  /* Semantic: Warning */
  --warning-color: #f59e0b;
  --warning-light: #fffbeb;
  --warning-dark:  #92400e;

  /* Semantic: Danger */
  --danger-color: #ef4444;
  --danger-light: #fef2f2;
  --danger-dark:  #991b1b;

  /* Semantic: Info */
  --info-color: #3b82f6;
  --info-light: #eff6ff;
  --info-dark:  #1e40af;

  /* Status Colors */
  --status-new:         #3b82f6;
  --status-active:      #10b981;
  --status-pending:     #f59e0b;
  --status-completed:   #10b981;
  --status-cancelled:   #6b7280;
  --status-overdue:     #ef4444;
  --status-in-progress: #f59e0b;
  --status-discarded:   #ef4444;
  --status-open:        #3b82f6;

  /* Priority Colors */
  --priority-high:   #ef4444;
  --priority-medium: #f59e0b;
  --priority-low:    #3b82f6;

  /* Surface / Background tokens (light theme defaults) */
  --muted-text:       #6b7280;
  --card-bg:          #ffffff;
  --card-header-bg:   #f9fafb;
  --card-border:      #e5e7eb;
  --border-color:     #e2e8f0;
  --input-bg:         #ffffff;
  --input-border:     #ced4da;
  --input-placeholder:#9ca3af;
  --footer-bg:        #ffffff;
  --footer-border:    #e9ecef;

  /* Bootstrap CSS variable overrides (static portion) */
  --bs-success:  var(--success-color);
  --bs-info:     var(--info-color);
  --bs-warning:  var(--warning-color);
  --bs-danger:   var(--danger-color);
  /* --bs-primary, --bs-secondary, --bs-body-bg, --bs-body-color, */
  /* --bs-link-color injected inline in base.html (tenant-dynamic) */

  /* Client portal layout token */
  --client-bottom-nav-height: 72px;

  /* ========================================
     INTERACTIVE / HOVER TOKENS
     ======================================== */
  --hover-bg: #f1f5f9;
  --hover-bg-subtle: rgba(15, 23, 42, 0.04);

  /* Table-specific tokens */
  --table-stripe-bg:  rgba(15, 23, 42, 0.025); /* zebra even rows — light mode */
  --table-divider:    #d1d9e6;                 /* row separator — darker than card border */

  /* ========================================
     SPACING SCALE (8px base system)
     ======================================== */
  --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-7: 1.75rem;  /* 28px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* ========================================
     TYPOGRAPHY SCALE
     ======================================== */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */

  /* CRM Data Density — body is 14px, tables 13px for information-dense layouts */
  --body-font-size:  0.875rem;   /* 14px — tighter than browser default 16px */
  --table-font-size: 0.8125rem;  /* 13px — maximizes table row density */
  --label-font-size: 0.8125rem;  /* 13px — form labels match table density */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* ========================================
     BORDER RADIUS SCALE
     ======================================== */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 14px;
  --radius-full: 999px;

  /* ========================================
     SHADOW SCALE
     ======================================== */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-navbar: 1100;
  --z-notification: 1200;

  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast: 100ms ease-in-out;
  --transition-base: 150ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
  --transition-all: all 150ms ease-in-out;

  /* ========================================
     LAYOUT SIZES
     ======================================== */
  --navbar-height: 60px;
  --sidebar-width: 290px;        /* matches sidebar.css definition */
  --sidebar-collapsed-width: 60px;

  /* Container Max Widths */
  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Column Widths (for tables) - Optimized for CRM data density */
  --col-w-xs: 80px;      /* Actions, icons, short codes */
  --col-w-sm: 120px;     /* Status, dates, short text */
  --col-w-md: 160px;     /* Names, numbers, medium text */
  --col-w-lg: 200px;     /* Full names, descriptions */
  --col-w-xl: 240px;     /* Longer descriptions */
  --col-w-2xl: 280px;    /* Long descriptions, addresses */
  --col-w-3xl: 400px;    /* Very long content */
  
  /* Percentage-based widths for flexible layouts */
  --col-w-10: 10%;
  --col-w-15: 15%;
  --col-w-20: 20%;
  --col-w-25: 25%;
  --col-w-30: 30%;
  --col-w-auto: auto;

  /* ========================================
     OPACITY SCALE
     ======================================== */
  --opacity-0: 0;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-100: 1;
}

/* ========================================
   DARK MODE ADJUSTMENTS
   ======================================== */
[data-bs-theme="dark"] {
  /* Shadows are more subtle in dark mode */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);

  /* Interactive tokens adjusted for dark surfaces */
  --hover-bg: rgba(148, 163, 184, 0.08);
  --hover-bg-subtle: rgba(148, 163, 184, 0.05);

  /* Table tokens — dark mode */
  --table-stripe-bg:  rgba(148, 163, 184, 0.05); /* zebra in dark mode */
  --table-divider:    #334155;                   /* row separator in dark mode */

  /* Surface tokens — dark mode overrides */
  --muted-text:        #94a3b8;
  --card-bg:           #1e293b;
  --card-header-bg:    #334155;
  --card-border:       #334155;
  --border-color:      #334155;
  --input-bg:          #0f172a;
  --input-border:      #334155;
  --input-placeholder: #64748b;
  --footer-bg:         #1e293b;
  --footer-border:     #334155;
}