/* ajour design tokens. Source of truth: docs/DESIGN.md + Paper file. */
:root {
  /* Color: light */
  --color-bg: #FFFFFF;
  --color-surface: #F4F4F2;      /* search field, badges, perspective cards */
  --color-rule: #E8E8E6;         /* dividers, card + chip borders */
  --color-ink: #111111;
  --color-muted: #5C5C5C;
  --color-marker: #FFE53D;       /* the one yellow moment */
  --color-on-marker: #111111;
  --color-positive: #1E8A4C;
  --color-negative: #C8382B;
  --color-caution: #A86A00;      /* admin status badges (planned); not the marker */
  --color-live: #E5372B;
  --color-pink: #FF5FA2;         /* reserved, currently unused */
  --color-blue: #3B6FD8;         /* reserved, currently unused */

  /* Type */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif; /* 700, 800 */
  --font-body: "Inter", system-ui, sans-serif;                  /* 400, 500, 600, 700 */
  --tracking-tight: -0.03em;
  --tracking-wide: 0.08em;

  /* Space + shape */
  --container: 1200px;
  --feed: 792px;
  --sidebar: 352px;
  --gutter-mobile: 16px;
  --radius-badge: 6px;
  --radius-thumb: 10px;
  --radius-card: 16px;
  --radius-hero: 20px;
  --radius-full: 999px;
}

[data-theme="dark"] {
  --color-bg: #000000;
  --color-card: #0E0E0E;         /* sidebar cards in dark */
  --color-surface: #1A1A1A;
  --color-rule: #262626;
  --color-chip-border: #333333;
  --color-ink: #F5F5F2;
  --color-muted: #A3A3A0;
  --color-positive: #3DD27A;
  --color-negative: #FF6B5E;
  --color-caution: #F2B33D;
  --color-blue: #7FA6F0;
  /* marker stays #FFE53D; text on marker stays #111111 */
}