/* ================================================================
   DESIGN TOKENS — PrintLogic.Ai v4.0
   ================================================================
   Print-shop aesthetic: dark sidebar, warm workspace, ink-inspired
   Source: mockup-redesign.html
   ================================================================ */

:root {
  /* Ink & Paper palette */
  --ink: #0f1419;
  --ink-light: #1a2332;
  --ink-lighter: #243044;
  --slate: #374151;
  --warm-gray: #6b7280;
  --silver: #9ca3af;
  --paper: #fafaf8;
  --cream: #f5f4f0;
  --card: #fff;

  /* Brand accent — warm red-orange (like a press mark) */
  --press-red: #c8382e;
  --press-red-hover: #a82e25;
  --press-red-light: rgb(200 56 46 / 8%);

  /* Secondary accent — teal/cyan (ink contrast) */
  --cyan: #0891b2;
  --cyan-light: rgb(8 145 178 / 8%);

  /* Purple — used for long-running workflow type badge */
  --purple-600: #7c3aed;

  /* Semantic */
  --primary: var(--ink);
  --accent: var(--press-red);
  --accent-hover: var(--press-red-hover);
  --surface: var(--card);
  --surface-alt: var(--cream);
  --bg: var(--paper);
  --text: #111827;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border: #e5e5e0;
  --border-strong: #d1d1cb;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 4%);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 6%), 0 1px 2px rgb(0 0 0 / 4%);
  --shadow-md: 0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 4%);
  --shadow-lg: 0 10px 15px rgb(0 0 0 / 6%), 0 4px 6px rgb(0 0 0 / 4%);

  /* Radius */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Typography */
  --font-body: 'DM Sans', -apple-system, blinkmacsystemfont, sans-serif;
  --font-mono: 'Space Mono', 'JetBrains Mono', monospace;

  /* Layout */
  --header-h: 48px;
  --sidebar-w: 240px;
  --right-flyout-w: 300px;

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 120ms var(--ease);
  --t-normal: 200ms var(--ease);
  --t-slow: 350ms var(--ease);
}

/* Dark mode overrides */
body.dark-mode {
  --bg: #0a0e14;
  --surface: #141a24;
  --surface-alt: #1a2332;
  --card: #141a24;
  --text: #e5e7eb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --border: #2a3444;
  --border-strong: #374151;
  --cream: #0f1419;
  --paper: #0a0e14;
}