:root {
  /* ── Studio palette ─────────────────────────────────────────
     Gallery-minimal: near-white surfaces, warm ink, hairlines.
     Photos provide the color; the UI stays quiet. */
  --color-bg: #fafaf9;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #e5e4e1;
  --color-text: #1a1917;
  --color-text-muted: #8a8781;
  --color-primary: #1a1917;            /* ink — interactive elements are ink, not a hue */
  --color-primary-contrast: #ffffff;
  --color-danger: #b3402e;             /* muted brick, used sparingly */
  --color-danger-bg: #f9edea;
  --color-info: #4a6b8a;               /* slate — before/after tags */
  --color-info-bg: #e7edf3;
  --color-bar-planned: #c2c0ba;        /* light concrete — planned portion of stat bars */
  /* status tints: raw plaster / sand / sage, all ink-strokeable */
  --color-status-empty: #f7f6f3;
  --color-status-active: #f3e6c8;
  --color-status-done: #e3ecdd;
  /* spacing scale */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem;
  /* type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 0.75rem;                 /* 12px — eyebrows, annotations */
  --text-sm: 0.8125rem;               /* 13px */
  --text-base: 0.9375rem;             /* 15px */
  --text-lg: 1.1875rem;               /* 19px */
  --text-xl: 1.5rem;                  /* 24px */
  --tracking-caps: 0.14em;            /* letter-spaced caps: eyebrows, wordmark, nav */
  /* shape: gallery = crisp, small radii, whisper shadows */
  --radius-sm: 3px; --radius-md: 6px; --radius-lg: 8px;
  --radius-pill: 999px;
  /* controls: pill & bold — buttons, inputs, selects share one shape language */
  --control-radius: var(--radius-pill);
  --control-border-w: 1.5px;
  --control-chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M2.5 4.5 L6 8 L9.5 4.5" fill="none" stroke="%231a1917" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --color-backdrop: rgb(26 25 23 / 0.2); /* modal dim — light: the page stays readable behind */
  --shadow-1: 0 1px 2px rgb(26 25 23 / 0.05);
  --shadow-2: 0 10px 30px rgb(26 25 23 / 0.10), 0 2px 6px rgb(26 25 23 / 0.06);
  /* component tokens */
  --text-plan-name: 15px;
  --text-plan-meta: 9px;
  --stroke-room: 1.25;
  --stroke-room-hover: 2;
  --stroke-text-halo: 3px;
  --opacity-cover: 0.92;
  --opacity-meta: 0.75;                /* plan info: full ink at 75% — darker than muted grey, still recedes */
  --opacity-done: 0.55;
  --opacity-thumb-inactive: 0.3;
  --line-height-badge: 1.7;
  --stat-bar-columns: 8rem 1fr 6.5rem;
  --stat-bar-track-height: 3px;
  --size-thumb-w: 120px;
  --size-thumb-h: 80px;
  --border-width-thick: 2px;
  --size-pin: 24px;
  --size-task-row-index: 20px;
  --size-popover-min-w: 240px;
  --scale-pin-highlight: 1.2;
  --size-shopping-total-col: 6.5rem;
}