/* ==========================================================================
   VentTrack Pro — Colors & Type
   Industrial utility SaaS. Clean professional lines, crisp colors.
   ========================================================================== */

/* --- Web fonts (Google Fonts) --------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ========================================================================
     COLOR — Primary (signal blue, crisp and technical)
     ====================================================================== */
  --vt-blue-50:  #EEF4FF;
  --vt-blue-100: #D6E4FF;
  --vt-blue-200: #ADC8FF;
  --vt-blue-300: #84A9FF;
  --vt-blue-400: #5B8DEF;
  --vt-blue-500: #0B5FFF;  /* brand primary */
  --vt-blue-600: #0847CC;
  --vt-blue-700: #063499;
  --vt-blue-800: #042566;
  --vt-blue-900: #021A4D;

  /* ---- Ink (deep navy neutrals; cooler than black, reads as "professional") */
  --vt-ink-50:   #F4F6F9;
  --vt-ink-100:  #E4E9F0;
  --vt-ink-200:  #C7D0DD;
  --vt-ink-300:  #9AA6B8;
  --vt-ink-400:  #6B7890;
  --vt-ink-500:  #4A5670;
  --vt-ink-600:  #2E3A52;
  --vt-ink-700:  #1E2940;
  --vt-ink-800:  #122036;  /* sidebar / app chrome */
  --vt-ink-900:  #0A2540;  /* primary ink */

  /* ---- Surface (paper whites) */
  --vt-surface-0:  #FFFFFF;
  --vt-surface-1:  #FAFBFC;
  --vt-surface-2:  #F4F6F9;
  --vt-surface-3:  #EDF1F6;
  --vt-line:       #E2E8F0;
  --vt-line-strong:#CBD5E1;

  /* ---- Semantic */
  --vt-success-50:  #ECFDF5;
  --vt-success-500: #10B981;
  --vt-success-700: #047857;

  --vt-warning-50:  #FFFBEB;
  --vt-warning-500: #F59E0B;
  --vt-warning-700: #B45309;

  --vt-danger-50:   #FEF2F2;
  --vt-danger-500:  #EF4444;
  --vt-danger-700:  #B91C1C;

  --vt-info-50:     #EFF6FF;
  --vt-info-500:    #3B82F6;
  --vt-info-700:    #1D4ED8;

  /* ---- Status colors (job/lead pipeline) */
  --vt-status-lead:      #8B5CF6; /* purple */
  --vt-status-scheduled: #0B5FFF; /* blue */
  --vt-status-inprogress:#F59E0B; /* amber */
  --vt-status-complete:  #10B981; /* green */
  --vt-status-overdue:   #EF4444; /* red */
  --vt-status-archived:  #6B7890; /* slate */

  /* ========================================================================
     SEMANTIC COLOR TOKENS
     ====================================================================== */
  --fg-1: var(--vt-ink-900);        /* primary text */
  --fg-2: var(--vt-ink-600);        /* secondary text */
  --fg-3: var(--vt-ink-400);        /* tertiary / meta */
  --fg-inverse: var(--vt-surface-0);
  --fg-accent: var(--vt-blue-500);
  --fg-on-accent: #FFFFFF;

  --bg-app: var(--vt-surface-2);
  --bg-surface: var(--vt-surface-0);
  --bg-surface-raised: var(--vt-surface-0);
  --bg-muted: var(--vt-surface-2);
  --bg-sidebar: var(--vt-ink-900);
  --bg-sidebar-hover: var(--vt-ink-800);

  --border-default: var(--vt-line);
  --border-strong: var(--vt-line-strong);
  --border-focus: var(--vt-blue-500);

  /* ========================================================================
     TYPE
     ====================================================================== */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --fs-display:  56px;
  --fs-h1:       40px;
  --fs-h2:       28px;
  --fs-h3:       20px;
  --fs-h4:       16px;
  --fs-body:     15px;
  --fs-small:    13px;
  --fs-micro:    11px;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-caps:   0.12em;

  /* ========================================================================
     SPACING / RADII / SHADOWS / MOTION
     ====================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* Shadows are restrained — crisp borders do most of the work */
  --shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.06);
  --shadow-sm: 0 1px 3px rgba(10, 37, 64, 0.08), 0 1px 2px rgba(10, 37, 64, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 37, 64, 0.08), 0 2px 4px rgba(10, 37, 64, 0.04);
  --shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.12), 0 4px 8px rgba(10, 37, 64, 0.06);
  --shadow-focus: 0 0 0 3px rgba(11, 95, 255, 0.2);

  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   320ms;
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================================================================
   Base element styles — apply these by adding class="vt" to a wrapper,
   or just `@import` this file for the tokens only.
   =========================================================================== */

.vt, .vt * { box-sizing: border-box; }

.vt {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.vt h1, .vt .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

.vt h2, .vt .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

.vt h3, .vt .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

.vt h4, .vt .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

.vt .display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.vt p, .vt .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  margin: 0;
}

.vt .small { font-size: var(--fs-small); color: var(--fg-2); }
.vt .micro { font-size: var(--fs-micro); color: var(--fg-3); }

.vt .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-accent);
}

.vt .mono, .vt code, .vt kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-ligatures: none;
}

.vt code {
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  color: var(--vt-ink-700);
}

.vt a { color: var(--fg-accent); text-decoration: none; }
.vt a:hover { text-decoration: underline; }

::selection { background: var(--vt-blue-100); color: var(--vt-blue-900); }