/* Design tokens for Ollie. Single source of truth for color, type, spacing,
   radius, and shadow values — every other stylesheet should reference these
   custom properties instead of hardcoding values. */
:root {
  /* Color: steel-blue primary + brass accent, evoking the mechanical/science
     motif theme (KAN-55) without committing content areas to heavy color. */
  --color-primary: #3b6e8f;
  --color-primary-hover: #2f5a73;
  --color-primary-light: #e5eef3;
  --color-accent: #b8763b;
  --color-accent-hover: #8a5828;
  --color-accent-light: #f5e9db;

  --color-success: #296e46;
  --color-success-light: #e3f2e8;
  --color-danger: #c0392b;
  --color-danger-light: #fbe6e3;
  --color-warning: #8a5c14;
  --color-warning-light: #faf0dc;
  --color-info: var(--color-primary);
  --color-info-light: var(--color-primary-light);

  --color-bg: #f7f6f3;
  --color-surface: #ffffff;
  --color-surface-alt: #f1efea;
  --color-border: #ddd9d0;
  --color-border-strong: #948c7c;
  --color-text: #24262b;
  --color-text-muted: #5e6268;
  --color-text-inverse: #ffffff;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Spacing scale (4px base unit) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(36, 38, 43, 0.06);
  --shadow-md: 0 2px 8px rgba(36, 38, 43, 0.1);
  --shadow-lg: 0 8px 24px rgba(36, 38, 43, 0.14);

  /* Layout */
  --content-max-width: 72rem;
  --header-height: 3.5rem;
}