/* Baggo design tokens — Stage 2 "Design_1" (warm paper), approved 16 Oct 2026.
   Extracted verbatim from the approved Baggo design system. Components use these
   variables only, never raw hex (CLAUDE.md). No dark theme at launch.
   Each accent is a MEANING and is always paired with an icon or word, never colour alone. */
:root {
  /* Surfaces & text */
  --bg: #FFFFFF;          /* page background: pure white */
  --surface: #F7F4EF;     /* the one warm off-white (paper) surface */
  --canvas: #EFEAE1;      /* desktop backdrop behind the centred app frame (wide screens only) */
  --line: #E6E1D8;        /* warm hairline border */
  --line-strong: #CFC8BA; /* stronger border / input outline */
  --ink: #171A1F;         /* primary text */
  --ink-2: #2F3640;       /* secondary ink */
  --slate: #5A6472;       /* slate body/secondary text (>=4.5:1 on paper) */
  --muted: #8A93A0;       /* muted/meta text — labels only, not body */
  --focus: #1361D1;       /* focus ring and links. Not one of the four meanings. */
  --focus-bg: #E7EFFA;

  /* Four accent meanings — each with a tint (-bg) and accessible text (-fg) */
  --packed: #0E7C66;    --packed-bg: #D9F0EA;  --packed-fg: #0A5A4A;   /* Packed */
  --skip: #B45309;      --skip-bg: #FBEBD2;    --skip-fg: #7A3C06;     /* Not needed */
  --private: #6D28D9;   --private-bg: #ECE3FB;  --private-fg: #51209E;  /* Private */
  --together: #D83A4E;  --together-bg: #FBE0E3; --together-fg: #A31F31; /* Together */

  /* Type — "Plus Jakarta Sans", one variable sans. Mono only for dates/counts. */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --fs-display: 42px;  /* hero numbers / big empty states */
  --fs-h1: 28px;
  --fs-h2: 20px;
  --fs-title: 17px;
  --fs-lg: 16px;
  --fs-body: 15px;     /* default body */
  --fs-sm: 14px;       /* smallest body-weight text allowed */
  --fs-meta: 14px;     /* labels / meta — held at the 14px floor (CLAUDE.md) */
  --fs-micro: 14px;    /* small labels / counts — also at the 14px floor */
  --lh-tight: 1.15;
  --lh-body: 1.45;

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

  /* Radius, elevation, motion */
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-chip: 999px;
  --shadow: 0 2px 8px rgba(23, 26, 31, .08);
  --dur: 180ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Minimum interactive sizes (CLAUDE.md): 44px targets, 48px for the item row's actions */
  --tap: 44px;
  --tap-row-action: 48px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}