/* ============================================================================
   CCL Acquisitions Dashboard — Design Tokens
   Source: DESIGN_SYSTEM.md (Session 14) + Mockup-approved values (Sessions 15-22)
   Load order: tokens.css → components.css → view-specific CSS
   ============================================================================ */

/* ========== COLOR TOKENS ========== */
:root {
  /* --- Brand --- */
  --brand: #487A7B;
  --brand-dark: #005151;
  --brand-light: #6B9A9A;
  --brand-wash: rgba(72,122,123,0.06);
  --brand-subtle: rgba(72,122,123,0.10);
  --brand-glow: rgba(72,122,123,0.20);

  /* --- Accent --- */
  --accent: #F68D2E;
  --accent-wash: rgba(246,141,46,0.08);

  /* --- Pipeline Stage Colors --- */
  /* Cool (new/early) → warm (active) → green (closing) */
  --stage-1: #6366F1;       /* New Submission (indigo) */
  --stage-2: #8B5CF6;       /* AI Analysis (violet) */
  --stage-3: #06B6D4;       /* Screening (cyan) */
  --stage-4: #3B82F6;       /* Underwriting L1 (blue) */
  --stage-5: #F59E0B;       /* Negotiation (amber) */
  --stage-6: #F97316;       /* Contract (orange) */
  --stage-7: #10B981;       /* Under Contract (emerald) */
  --stage-8: #059669;       /* Closing (green) */
  --stage-won: #047857;     /* Closed Won (dark green) */
  --stage-declined: #EF4444;/* Not Moving Forward (red) */

  /* Stage washes (8% opacity — for badges, row highlights) */
  --stage-1-wash: rgba(99,102,241,0.08);
  --stage-2-wash: rgba(139,92,246,0.08);
  --stage-3-wash: rgba(6,182,212,0.08);
  --stage-4-wash: rgba(59,130,246,0.08);
  --stage-5-wash: rgba(245,158,11,0.08);
  --stage-6-wash: rgba(249,115,22,0.08);
  --stage-7-wash: rgba(16,185,129,0.08);
  --stage-8-wash: rgba(5,150,105,0.08);
  --stage-won-wash: rgba(4,120,87,0.08);
  --stage-declined-wash: rgba(239,68,68,0.08);

  /* Stage badge backgrounds (12% opacity) */
  --stage-1-badge: rgba(99,102,241,0.12);
  --stage-2-badge: rgba(139,92,246,0.12);
  --stage-3-badge: rgba(6,182,212,0.12);
  --stage-4-badge: rgba(59,130,246,0.12);
  --stage-5-badge: rgba(245,158,11,0.12);
  --stage-6-badge: rgba(249,115,22,0.12);
  --stage-7-badge: rgba(16,185,129,0.12);
  --stage-8-badge: rgba(5,150,105,0.12);
  --stage-won-badge: rgba(4,120,87,0.12);
  --stage-declined-badge: rgba(239,68,68,0.12);

  /* --- Temperature Colors --- */
  --temp-hot: #10B981;      /* Strong opportunity (emerald) */
  --temp-warm: #84CC16;     /* Good signs (lime) */
  --temp-cool: #F59E0B;     /* Lukewarm (amber) */
  --temp-cold: #3B82F6;     /* Weak signals (blue) */
  --temp-frozen: #94A3B8;   /* Stale/dead (slate) */

  --temp-hot-wash: rgba(16,185,129,0.10);
  --temp-warm-wash: rgba(132,204,22,0.10);
  --temp-cool-wash: rgba(245,158,11,0.10);
  --temp-cold-wash: rgba(59,130,246,0.10);
  --temp-frozen-wash: rgba(148,163,184,0.10);

  /* --- Sub-State Colors (within-stage progress) --- */
  /* Values match approved mockups (Sessions 15-21) */
  --sub-assigned: #94A3B8;  /* Notified, not started (slate) */
  --sub-progress: #3B82F6;  /* Actively working (blue) */
  --sub-review: #8B5CF6;    /* Awaiting Acq Lead approval (violet) */
  --sub-approved: #10B981;  /* Confirmed (emerald) */
  --sub-hold: #F59E0B;      /* Sent back with feedback (amber) */

  --sub-assigned-wash: rgba(148,163,184,0.10);
  --sub-progress-wash: rgba(59,130,246,0.10);
  --sub-review-wash: rgba(139,92,246,0.10);
  --sub-approved-wash: rgba(16,185,129,0.10);
  --sub-hold-wash: rgba(245,158,11,0.10);

  /* --- Days Aging --- */
  --days-neutral: var(--gray-500);   /* < 7 days */
  --days-warning: #F59E0B;           /* 7-13 days (amber) */
  --days-urgent: #EF4444;            /* 14+ days (red) */

  /* --- Semantic Colors --- */
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #3B82F6;

  --success-wash: rgba(16,185,129,0.08);
  --warning-wash: rgba(245,158,11,0.08);
  --error-wash: rgba(239,68,68,0.08);
  --info-wash: rgba(59,130,246,0.08);

  /* --- Neutrals (Zinc Scale) --- */
  --gray-50: #FAFAFA;       /* Page background */
  --gray-100: #F4F4F5;      /* Card bg (alt), sidebar bg */
  --gray-200: #E4E4E7;      /* Borders, dividers, table headers */
  --gray-300: #D4D4D8;      /* Input borders (resting), disabled */
  --gray-400: #A1A1AA;      /* Placeholder text, disabled text */
  --gray-500: #71717A;      /* Secondary text, timestamps, labels */
  --gray-600: #52525B;      /* Body text (secondary emphasis) */
  --gray-700: #3F3F46;      /* Body text (primary) */
  --gray-800: #27272A;      /* Headings, strong text */
  --gray-900: #18181B;      /* Page titles, highest emphasis */
  --white: #FFFFFF;

  /* --- Role Badge Colors (from MOCKUP_AMENDMENTS) --- */
  --role-admin-bg: rgba(72,122,123,0.10);
  --role-admin-text: #487A7B;
  --role-assignee-bg: #EEF2FF;
  --role-assignee-text: #6366F1;
  --role-submitter-bg: #F0FDF4;
  --role-submitter-text: #16A34A;

  /* --- Notification Icon Colors (from MOCKUP_AMENDMENTS) --- */
  --notif-submission-bg: #EEF2FF;
  --notif-submission-color: #6366F1;
  --notif-advance-bg: #F0FDF4;
  --notif-advance-color: #22C55E;
  --notif-task-bg: #FFF7ED;
  --notif-task-color: #F97316;
  --notif-escalation-bg: #FEF2F2;
  --notif-escalation-color: #EF4444;
  --notif-approval-bg: #FFFBEB;
  --notif-approval-color: #F59E0B;
  --notif-assignment-bg: #EFF6FF;
  --notif-assignment-color: #3B82F6;
  --notif-sendback-bg: #FEF2F2;
  --notif-sendback-color: #EF4444;
  --notif-deadline-bg: #FFFBEB;
  --notif-deadline-color: #F59E0B;
  --notif-milestone-bg: var(--brand-wash);
  --notif-milestone-color: #487A7B;
  --notif-report-bg: #F5F3FF;
  --notif-report-color: #8B5CF6;
  --notif-won-bg: #F0FDF4;
  --notif-won-color: #22C55E;
  --notif-declined-bg: #FEF2F2;
  --notif-declined-color: #EF4444;
  --notif-reviewed-bg: #F0FDF4;
  --notif-reviewed-color: #22C55E;


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

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Type scale */
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;


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

  --s-0: 0px;
  --s-0-5: 2px;
  --s-1: 4px;
  --s-1-5: 6px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;


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

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-brand: 0 4px 14px rgba(72,122,123,0.18);
  --shadow-panel: -4px 0 24px rgba(0,0,0,0.08);


  /* ========== BORDER RADIUS ========== */

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-full: 9999px;


  /* ========== TRANSITIONS ========== */

  --t-fast: 120ms ease;
  --t-base: 200ms ease;
  --t-slow: 300ms ease;
  --t-slower: 500ms ease;


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

  --z-base: 0;
  --z-filter: 35;
  --z-summary: 40;
  --z-header: 50;
  --z-dropdown: 60;
  --z-panel-backdrop: 90;
  --z-panel: 100;
  --z-modal-backdrop: 190;
  --z-modal: 200;
  --z-toast: 300;
  --z-tooltip: 400;
}


/* ========== RESET ========== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--text-base);
}

body {
  font-family: var(--font-sans);
  background: var(--gray-50);
  color: var(--gray-700);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  min-height: calc(100vh - 56px);   /* 56px = app-header height */
}

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* Scrollbar styling (matches mockups) */
::-webkit-scrollbar { width: 4px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }


/* ========== KEYFRAME ANIMATIONS ========== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes slideUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(72,122,123,0.25); }
  50% { box-shadow: 0 0 0 8px rgba(72,122,123,0); }
}

@keyframes toastProgress {
  from { width: 100%; }
  to { width: 0%; }
}

@keyframes toastEnter {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes dhlFill {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes cardReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cardPulse {
  0%, 100% { box-shadow: var(--shadow-xs); }
  50% { box-shadow: 0 0 0 3px var(--accent-wash), var(--shadow-sm); }
}

@keyframes dropdownReveal {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


/* ========== UTILITY CLASSES ========== */

.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-sans); }

.text-brand { color: var(--brand); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}