/* ══════════════════════════════════════════════════════
   theme-base.css — InvoiceFlow Pro v3
   CSS Variables, Reset, Typography, Font imports
   Lines: 121
   ══════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════
   theme.css — InvoiceFlow Pro v3
   Design inspired by: trylapis.com + videomule.ai
   Dark navy shell · Purple/violet accents · Clean cards
   Last cleaned: duplicates removed, view system added
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Core Palette ── */
  --bg: #F4F6FB;
  --white: #FFFFFF;
  --shell: #0D0F1A;
  --shell2: #13162A;
  --shell3: #1A1E35;

  /* ── Text ── */
  --slate: #0A0C1E;
  --s2: #1C1F3A;
  --s3: #2A3050;
  --s4: #434B76;
  --muted: #6B7280;
  --border: #E4E7F4;
  --border2: #CDD2EA;

  /* ── Primary — Purple/Violet ── */
  --pu: #7C3AED;
  --pu2: #6D28D9;
  --pu3: #5B21B6;
  --pu-lt: #A78BFA;
  --pu-bg: #F5F3FF;
  --pu-glow: rgba(124, 58, 237, .18);

  /* ── Accent — Indigo ── */
  --in: #4F46E5;
  --in2: #4338CA;
  --in-bg: #EEF2FF;
  --in-glow: rgba(79, 70, 229, .15);

  /* ── Orange ── */
  --or: #F97316;
  --or2: #EA580C;
  --or-bg: #FFF7ED;

  /* ── Green ── */
  --gr: #10B981;
  --gr2: #059669;
  --gr-bg: #ECFDF5;

  /* ── Red ── */
  --re: #EF4444;
  --re-bg: #FEF2F2;

  /* ── Blue ── */
  --bl: #3B82F6;
  --bld: #1D4ED8;
  --bl-bg: #EFF6FF;

  /* ── Amber ── */
  --am: #F59E0B;
  --am-bg: #FFFBEB;

  /* ── Teal ── */
  --te: #0D9488;
  --te-bg: #F0FDFA;

  /* ── Rose ── */
  --ro: #E11D48;
  --ro-bg: #FFF1F2;

  /* ── Cyan ── */
  --cy: #06B6D4;
  --cy-bg: #ECFEFF;

  /* ── Gradients ── */
  --grad-primary: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
  --grad-shell: linear-gradient(180deg, #0D0F1A 0%, #13162A 100%);
  --grad-card: linear-gradient(135deg, #ffffff 0%, #F8F7FF 100%);
  --grad-glow: radial-gradient(ellipse at top, rgba(124, 58, 237, .12) 0%, transparent 70%);

  /* ── Typography ── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Radii ── */
  --r: 10px;
  --r2: 14px;
  --r3: 18px;

  /* ── Shadows ── */
  --sh: 0 1px 3px rgba(10, 12, 30, .06), 0 1px 2px rgba(10, 12, 30, .04);
  --sh2: 0 4px 16px rgba(10, 12, 30, .08);
  --sh3: 0 8px 32px rgba(10, 12, 30, .14);
  --sh-pu: 0 4px 20px rgba(124, 58, 237, .25);
  --sh-glow: 0 0 0 3px rgba(124, 58, 237, .15);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--slate);
  font-size: 13px;
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}