/* ═══════════════════════════════════════════════════════════════
   HIGH 5 CONNECT CRM — V2 Design Tokens
   2026 Glassmorphism Design System
   Change one variable, entire app updates.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Navy Scale (Primary) ──────────────────────────────── */
  --navy-darkest: #0a1628;
  --navy-dark:    #0f2040;
  --navy-base:    #1a3155;
  --navy-medium:  #2a4a7f;
  --navy-light:   #3d6cb4;
  --navy-whisper: #e8eef6;

  /* ─── Accent — Teal (Brand) ─────────────────────────────── */
  --accent:       #068bc3;
  --accent-light: #0ea5e9;
  --accent-bg:    #e0f4fc;

  /* ─── Backgrounds ───────────────────────────────────────── */
  --bg-page:     #f8fafc;
  --bg-card:     #ffffff;
  --bg-input:    #f1f5f9;
  --bg-hover:    #f1f5f9;
  --bg-selected: #e8eef6;
  --bg-divider:  #e2e8f0;

  /* ─── Borders ───────────────────────────────────────────── */
  --border:       #e2e8f0;
  --border-focus: #068bc3;
  --border-subtle: rgba(0, 0, 0, 0.04);

  /* ─── Text Hierarchy (3 levels — never flat) ────────────── */
  --text-primary:   #0f172a;  /* names, titles, amounts — semibold/bold */
  --text-secondary: #475569;  /* descriptions, addresses — regular */
  --text-label:     #94a3b8;  /* field headers, hints — small, uppercase, 600 */
  --text-inverse:   #ffffff;
  --text-link:      #068bc3;

  /* ─── Glassmorphism — Frosted Glass ─────────────────────── */
  --glass-bg:       rgba(255, 255, 255, 0.08);
  --glass-border:   rgba(255, 255, 255, 0.12);
  --glass-shadow:   0 8px 32px rgba(10, 22, 40, 0.2);

  /* ─── Overlays (navy-tinted, not pure black) ────────────── */
  --overlay-sm:     rgba(10, 22, 40, 0.3);
  --overlay-md:     rgba(10, 22, 40, 0.4);
  --overlay-lg:     rgba(10, 22, 40, 0.6);

  /* ─── Sidebar text (white-on-navy, opacity variants) ────── */
  --sidebar-text:       rgba(255, 255, 255, 0.65);
  --sidebar-text-hover: rgba(255, 255, 255, 0.9);
  --sidebar-text-muted: rgba(255, 255, 255, 0.4);
  --sidebar-hover-bg:   rgba(255, 255, 255, 0.08);
  --sidebar-active-bg:  rgba(6, 139, 195, 0.2);
  --sidebar-border:     rgba(255, 255, 255, 0.1);

  /* ─── Amber / Red text tokens ───────────────────────────── */
  --amber-text:   #92400e;
  --red-dark:     #b91c1c;

  /* ─── Status Colors ─────────────────────────────────────── */
  --green:      #16a34a;
  --green-bg:   #dcfce7;
  --amber:      #f59e0b;
  --amber-bg:   #fef3c7;
  --red:        #dc2626;
  --red-bg:     #fee2e2;
  --blue:       #2563eb;
  --blue-bg:    #dbeafe;
  --violet:     #7c3aed;
  --violet-bg:  #ede9fe;

  /* ─── Pipeline Stage Colors (LOCKED — Do Not Change) ────── */
  --stage-new-lead:        #068bc3;
  --stage-appt-scheduled:  #7b1fa2;
  --stage-proposal-sent:   #e65100;
  --stage-signed:          #2e7d32;
  --stage-pre-production:  #f57f17;
  --stage-production:      #1565c0;
  --stage-post-production: #00695c;
  --stage-payment:         #4527a0;
  --stage-completed:       #1b5e20;
  --stage-lost:            #b71c1c;
  --stage-unqualified:     #546e7a;

  /* ─── Spacing (4px base) ────────────────────────────────── */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  20px;
  --s6:  24px;
  --s7:  28px;
  --s8:  32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;

  /* ─── Border Radius (rounded everything) ────────────────── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;   /* inputs, buttons */
  --r-lg:   12px;  /* cards, modals */
  --r-xl:   16px;  /* large cards, panels */
  --r-full: 9999px; /* avatars, badges, pills */

  /* ─── Shadows (navy-tinted, not pure black) ─────────────── */
  --shadow-xs:    0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-sm:    0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-md:    0 2px 8px rgba(10, 22, 40, 0.06);
  --shadow-lg:    0 4px 16px rgba(10, 22, 40, 0.08);
  --shadow-xl:    0 8px 32px rgba(10, 22, 40, 0.12);
  --shadow-panel: 0 0 40px rgba(10, 22, 40, 0.12);
  --shadow-glass: 0 8px 32px rgba(10, 22, 40, 0.2);

  /* ─── Blur (glassmorphism) ──────────────────────────────── */
  --blur-sm:  blur(8px);
  --blur-md:  blur(16px);
  --blur-lg:  blur(20px);

  /* ─── Transitions ───────────────────────────────────────── */
  --t-fast:   120ms ease;
  --t-normal: 200ms ease;
  --t-slow:   300ms ease;

  /* ─── Typography — Inter ────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:   0.75rem;    /* 12px — labels */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px — body */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px — section headers */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px — page titles */
  --text-3xl:  1.875rem;   /* 30px */

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:  -0.02em;  /* page titles */
  --tracking-normal: -0.01em;  /* section headers, numbers */
  --tracking-wide:   0.04em;   /* labels (uppercase) */

  /* ─── Layout ────────────────────────────────────────────── */
  --sidebar-width:    240px;
  --sidebar-collapsed: 64px;
  --topbar-height:    56px;
  --panel-width:      680px;
  --bottomnav-height: 64px;
  --fab-size:         56px;

  /* ─── Z-Index Scale ─────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-panel:    300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}

/* ─── Dark Mode ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-page:     #0f172a;
  --bg-card:     #1e293b;
  --bg-input:    #334155;
  --bg-hover:    #334155;
  --bg-selected: #1e3a5f;
  --bg-divider:  #334155;

  --border:        #334155;
  --border-focus:  #0ea5e9;
  --border-subtle: rgba(255, 255, 255, 0.06);

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-label:     #64748b;

  --glass-bg:     rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  --overlay-sm:   rgba(0, 0, 0, 0.4);
  --overlay-md:   rgba(0, 0, 0, 0.6);
  --overlay-lg:   rgba(0, 0, 0, 0.8);

  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.3);
  --shadow-xl:    0 20px 25px rgba(0, 0, 0, 0.4);
  --shadow-panel: 0 0 40px rgba(0, 0, 0, 0.4);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4);

  --amber-text:    #fbbf24;
  --red-dark:      #f87171;
  --green-bg:      rgba(22, 163, 74, 0.15);
  --amber-bg:      rgba(245, 158, 11, 0.15);
  --red-bg:        rgba(220, 38, 38, 0.15);
  --blue-bg:       rgba(37, 99, 235, 0.15);
  --violet-bg:     rgba(124, 58, 237, 0.15);
  --accent-bg:     rgba(6, 139, 195, 0.15);
  --navy-whisper:  rgba(26, 49, 85, 0.4);
}