@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Palette */
  --ink:        oklch(18% 0 0);
  --ink-muted:  oklch(45% 0 0);
  --ink-faint:  oklch(70% 0 0);
  --paper:      oklch(98% 0.01 80);
  --surface:    oklch(96% 0.005 80);
  --surface-2:  oklch(93% 0.008 80);
  --border:     oklch(88% 0.006 80);
  --border-2:   oklch(82% 0.006 80);
  --accent:     oklch(45% 0.2 268);
  --accent-dim: oklch(45% 0.2 268 / 0.1);
  --danger:     oklch(55% 0.18 25);
  --success:    oklch(55% 0.14 160);

  /* Typography */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;
  --font-sans:  'Inter', system-ui, sans-serif;

  /* Scale */
  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;

  /* Space */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* Radius */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Motion */
  --dur-fast:   150ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  /* Sidebar */
  --sidebar-w: 260px;

  /* Invoice document width (A4-ish for screen) */
  --doc-w: 760px;
}