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

/* ── Design Tokens ────────────────────────────────────────────────────────── */
/* Single source of truth for colour, spacing, typography, motion, elevation.
   Components consume tokens via var(--…). Dark mode overrides tokens, not
   individual components. New work should NEVER hard-code hex codes / px
   sizes — pull from a token. */
:root {
  /* ── Colour: brand & primary ─────────────────────────────────────────── */
  /* Refined "modern enterprise" blue — deeper, more saturated than the old
     #2563a8. Stays in the indigo-blue family (Linear/Vercel/Stripe register)
     so existing dark-theme overrides still align. */
  --color-primary:       #2563eb;        /* primary actions, links, focus */
  --color-primary-hover: #1d4ed8;
  --color-primary-active:#1e40af;
  --color-primary-light: #eff4ff;        /* selected nav, active subtle bg */
  --color-primary-soft:  #dbeafe;        /* tinted callouts */
  --color-primary-ring:  rgba(37, 99, 235, 0.18);

  /* Primary scale — for gradients, hover transitions, sparkline strokes. */
  --color-primary-50:    #eff6ff;
  --color-primary-100:   #dbeafe;
  --color-primary-200:   #bfdbfe;
  --color-primary-300:   #93c5fd;
  --color-primary-400:   #60a5fa;
  --color-primary-500:   #3b82f6;
  --color-primary-600:   #2563eb;
  --color-primary-700:   #1d4ed8;
  --color-primary-800:   #1e40af;
  --color-primary-900:   #1e3a8a;

  /* Accent — used sparingly for highlights, success arrows, deltas. */
  --color-accent:        #8b5cf6;        /* violet 500 */
  --color-accent-soft:   #ede9fe;

  --color-brand:         #1e3a8a;        /* corporate navy — invoices, official docs */
  --color-brand-hover:   #1e40af;

  /* ── Colour: surfaces & text ─────────────────────────────────────────── */
  --color-body-bg:    #f6f8fb;          /* very subtle cool tint — softer than pure gray */
  --color-surface:    #ffffff;           /* cards, modals, panels */
  --color-surface-2:  #f8fafc;           /* sunken surfaces — table headers, summary boxes */
  --color-surface-3:  #f1f5f9;           /* deeper sunken — pre/code, disabled fields */
  --color-white:      #fff;              /* legacy alias of --color-surface */
  --color-border:     #e2e8f0;          /* slightly cooler than the old #e5e7eb */
  --color-border-strong: #cbd5e1;
  --color-border-lt:  #f1f5f9;
  --color-overlay:    rgba(15, 23, 42, 0.55);  /* modal scrim — slightly stronger */

  --color-text:       #0f172a;          /* near-black slate — better contrast than #1a1a2e */
  --color-text-mid:   #334155;
  --color-text-muted: #64748b;
  --color-text-faint: #94a3b8;
  --color-text-on-brand: #ffffff;

  /* ── Colour: semantic ────────────────────────────────────────────────── */
  /* All paired (fg + bg) so badges, callouts, and stat icons can use them
     without picking individual tones each time. */
  --color-success:    #10b981;
  --color-success-bg: #ecfdf5;
  --color-success-fg: #047857;
  --color-success-soft: #d1fae5;
  --color-success-hover: #059669;       /* one shade darker than --color-success */
  --color-danger:     #ef4444;
  --color-danger-bg:  #fef2f2;
  --color-danger-fg:  #b91c1c;
  --color-danger-soft: #fee2e2;
  --color-danger-hover: #dc2626;
  --color-warning:    #f59e0b;
  --color-warning-bg: #fffbeb;
  --color-warning-fg: #b45309;
  --color-warning-soft: #fef3c7;
  --color-warning-hover: #d97706;
  --color-info:       #3b82f6;
  --color-info-bg:    #eff6ff;
  --color-info-fg:    #1d4ed8;
  --color-info-soft:  #dbeafe;
  --color-purple:     #8b5cf6;
  --color-purple-bg:  #f5f3ff;
  --color-purple-fg:  #6d28d9;
  --color-teal:       #14b8a6;
  --color-teal-bg:    #f0fdfa;
  --color-teal-fg:    #0f766e;
  --color-pink:       #ec4899;
  --color-pink-bg:    #fdf2f8;
  --color-pink-fg:    #be185d;
  --color-orange:     #f97316;
  --color-orange-bg:  #fff7ed;
  --color-orange-fg:  #c2410c;

  /* ── Gradients — used sparingly for headers, hero stats, primary CTA ── */
  --gradient-primary:    linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  --gradient-primary-soft: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  --gradient-success:    linear-gradient(135deg, #34d399 0%, #10b981 100%);
  --gradient-danger:     linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  --gradient-warning:    linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --gradient-purple:     linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
  --gradient-card-glow:  linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);

  /* ── Spacing scale (4px base) ────────────────────────────────────────── */
  --space-0: 0;
  --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;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font:        'Inter', sans-serif;
  --font-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;          /* default body for dense data UI */
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-display: 44px;       /* hero stat numbers, page big-counts */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-heavy:   800;
  --weight-black:   900;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight: -0.015em;
  --tracking-snug:  -0.005em;
  --tracking-wide:  0.04em;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-pill: 9999px;

  /* ── Elevation (shadow) ──────────────────────────────────────────────── */
  /* Layered shadows — the second layer (ambient) softens the edge so the
     element feels lifted without a hard drop-shadow. Linear/Notion idiom. */
  --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-card:  0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 4px rgba(15, 23, 42, 0.06);
  --shadow-md:    0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-lg:    0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-xl:    0 24px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.04);
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.18), 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-popup: 0 16px 48px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-focus: 0 0 0 3px var(--color-primary-ring);
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-glow-primary: 0 8px 24px rgba(37, 99, 235, 0.24);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  /* Use --ease-out for almost everything (entry, hover, focus). Snappy and
     modern; matches the easing that Notion / Linear / Vercel ship. */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;

  /* ── Z-index scale ───────────────────────────────────────────────────── */
  --z-base:       1;
  --z-sticky:     50;
  --z-sidebar:    100;
  --z-popover:    200;
  --z-overlay:    900;
  --z-modal:      1000;
  --z-toast:      9999;

  /* ── Layout constants ────────────────────────────────────────────────── */
  --sidebar-w: 250px;
  --header-h:  64px;
}

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

/* ── Base typography ──────────────────────────────────────────────────────── */
body {
  font-family: var(--font);
  background: var(--color-body-bg);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-snug);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';  /* Inter alt glyphs (1,4,6,9) */
  /* Smooth dark-mode swap — when [data-theme] flips, body colours animate
     instead of snap. Limited to colour properties so layout doesn't jitter. */
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

/* Headings get slightly tighter tracking for visual polish. */
h1, h2, h3, h4 { letter-spacing: var(--tracking-tight); }
h1 { line-height: var(--leading-tight); }

a { color: inherit; }
button { font-family: var(--font); }
input, select, textarea { font-family: var(--font); }

/* ── Accessible focus ring ────────────────────────────────────────────────── */
/* :focus-visible only fires on keyboard navigation (not mouse clicks) so we
   give power users a clear ring without bothering mouse users with halos. */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}
/* Form fields already have a visible border — let the box-shadow act as the
   ring without losing the border colour change. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.input:focus-visible,
.form-select:focus-visible {
  border-color: var(--color-primary);
}

/* ── Hide scrollbars globally (still scrollable) ─────────────────────────── */
* {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE / Edge */
}
*::-webkit-scrollbar {
  display: none;               /* Chrome / Safari / Opera */
}

/* ── Utility layer ────────────────────────────────────────────────────────── */
/* Shortcuts that pull from tokens. Use these in new code instead of hardcoding
   sizes/shadows. e.g. <div class="card elev-2 stack-3"> */

/* Typography */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.font-medium { font-weight: var(--weight-medium); }
.font-semi   { font-weight: var(--weight-semi); }
.font-bold   { font-weight: var(--weight-bold); }
.font-mono   { font-family: var(--font-mono); }
.tabular     { font-variant-numeric: tabular-nums; }
.text-muted  { color: var(--color-text-muted); }
.text-faint  { color: var(--color-text-faint); }
.text-brand  { color: var(--color-brand); }

/* Elevation */
.elev-0 { box-shadow: none; }
.elev-1 { box-shadow: var(--shadow-sm); }
.elev-2 { box-shadow: var(--shadow-md); }
.elev-3 { box-shadow: var(--shadow-lg); }

/* Vertical stack with consistent gap — replaces ad-hoc margin-bottom on
   every child. <div class="stack-3"> gives 12px between children. */
.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }

/* Horizontal row with gap */
.row-1 { display: flex; gap: var(--space-1); }
.row-2 { display: flex; gap: var(--space-2); }
.row-3 { display: flex; gap: var(--space-3); }
.row-4 { display: flex; gap: var(--space-4); }
.row-6 { display: flex; gap: var(--space-6); }

/* Skeleton loader — drop on a div sized to the eventual content. Far better
   perceived speed than a centred spinner. */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-border-lt) 0%,
    var(--color-border) 50%,
    var(--color-border-lt) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Respect users who've requested reduced motion (OS-level setting). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}