/* Blattwerk design foundation v1. Approved mockups: design/README.md.
 * Load fonts.css separately. This file defines values without styling app elements.
 */
:root {
  color-scheme: light;

  --bw-color-paper: #FAF9F6;
  --bw-color-sidebar: #F1F0EA;
  --bw-color-surface: #FFFFFF;
  --bw-color-ink: #252A26;
  --bw-color-muted: #626960;
  --bw-color-forest: #31594B;
  --bw-color-forest-hover: #26483C;
  --bw-color-sage: #E6EDE6;
  --bw-color-border: #DDDCD4;
  --bw-color-control-border: #7B8478;
  --bw-color-inverse: #FFFFFF;
  --bw-color-status-open: #626960;
  --bw-color-status-open-bg: #EEEDEA;
  --bw-color-status-progress: #785724;
  --bw-color-status-progress-bg: #FBEDD4;
  --bw-color-status-done: #31594B;
  --bw-color-status-done-bg: #E6EDE6;
  --bw-color-danger: #A13C34;
  --bw-color-danger-bg: #F9E6E3;
  --bw-color-presence: #6E5390;
  --bw-color-presence-bg: #ECE5F5;

  --bw-font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bw-font-display: "Source Serif 4", Georgia, serif;
  --bw-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --bw-font-weight-regular: 400;
  --bw-font-weight-medium: 500;
  --bw-font-weight-semibold: 600;
  --bw-font-weight-bold: 700;
  --bw-font-size-meta: 0.8125rem;
  --bw-font-size-ui: 0.875rem;
  --bw-font-size-body: 1rem;
  --bw-font-size-section: 1.5rem;
  --bw-font-size-title: 3rem;
  --bw-line-height-ui: 1.45;
  --bw-line-height-body: 1.6;
  --bw-line-height-title: 1.12;
  --bw-letter-spacing-title: -0.025em;

  --bw-space-1: 0.25rem;
  --bw-space-2: 0.5rem;
  --bw-space-3: 0.75rem;
  --bw-space-4: 1rem;
  --bw-space-6: 1.5rem;
  --bw-space-8: 2rem;
  --bw-space-12: 3rem;
  --bw-space-16: 4rem;
  --bw-radius-control: 0.5rem;
  --bw-radius-dialog: 0.75rem;
  --bw-radius-badge: 999px;
  --bw-control-height: 2.5rem;
  --bw-touch-target: 2.75rem;
  --bw-sidebar-width: 16rem;
  --bw-comments-width: 20rem;
  --bw-document-max-width: 52rem;
  --bw-prose-max-width: 72ch;
  --bw-dialog-max-width: 38rem;
  --bw-page-gutter: 3rem;
  --bw-icon-size: 1.25rem;
  --bw-icon-stroke: 1.75;
  --bw-focus-ring: 0 0 0 2px #FAF9F6, 0 0 0 4px #31594B;
  --bw-shadow-dialog: 0 16px 48px rgb(37 42 38 / 16%);
  --bw-overlay: rgb(37 42 38 / 40%);
  --bw-motion-duration: 150ms;
  --bw-motion-easing: cubic-bezier(0.2, 0, 0, 1);
}

/* Breakpoints are literal media queries: CSS variables cannot drive them. */
@media (max-width: 767px) {
  :root {
    --bw-font-size-title: 2rem;
    --bw-font-size-section: 1.375rem;
    --bw-page-gutter: 1.5rem;
    --bw-control-height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bw-motion-duration: 0ms;
  }
}