/* ============================================================
   tokens.css: printshi design tokens.
   Single source of truth for color, type, spacing, radius.
   Imported first on every page so all other CSS reads from here.
   ============================================================ */

:root {
  /* color: light mode */
  --ink: #1B1B1F;
  --ink-muted: #55534C;
  --ink-subtle: #8A867C;
  --surface: #FBF8F1;
  --surface-2: #F3EFE4;
  --card: #FFFFFF;
  --border: #E7E0CF;
  --border-strong: #CFC6AF;
  --accent: #2E5E4E;
  --accent-ink: #1E4335;
  --accent-soft: #E6EFE9;
  --success: #3D6F50;
  --danger: #8B2E28;

  /* radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(27, 27, 31, 0.05), 0 1px 3px rgba(27, 27, 31, 0.04);
  --shadow-md: 0 4px 12px rgba(27, 27, 31, 0.06), 0 2px 4px rgba(27, 27, 31, 0.04);
  --shadow-lg: 0 24px 48px rgba(27, 27, 31, 0.10), 0 4px 12px rgba(27, 27, 31, 0.05);

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* type families */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* layout */
  --container: 1200px;
  --container-narrow: 860px;

  /* motion */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
}

[data-theme="dark"] {
  --ink: #F5F0E4;
  --ink-muted: #C2BCB0;
  --ink-subtle: #8F8B80;
  --surface: #141316;
  --surface-2: #1C1B1E;
  --card: #201F22;
  --border: #2B292D;
  --border-strong: #3F3C40;
  --accent: #7BB39E;
  --accent-ink: #A6D2C1;
  --accent-soft: #1F2C28;
  --success: #7BB39E;
  --danger: #C96B62;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}