/* ==========================================================================
   Themescape tokens, v3 (moved here from themescape-app.css, 21 October 2026)
   One set of colours, spacing, radius and type, shared by the viewer and the
   account pages. Load this file before themescape-app.css or the viewer's own styles.
   ========================================================================== */

:root {
  /* Brand colour (Themescape brand guidelines v1.1) */
  --espresso: #3B2620;
  --umber: #7A4E37;
  --cream: #FFFBF4;
  --latte: #E9DED0;
  --tip-butter: #FFF1B8; /* tips, help cards and the demo tour only (Charlotte, 24 October 2026): espresso text 12.5:1, grounds 5.8:1 */
  --tip-butter-deep: #F6E08A; /* a button hovered on butter */
  --silver: #AEB6BC;          /* quotes in the viewer only, never text */
  --secondary: #6B5A52;       /* secondary text: 6.3:1 on cream, 4.9:1 on latte */

  /* Lines */
  --line: rgba(59, 38, 32, .55);   /* field outlines: 3.4:1 on cream (WCAG 1.4.11) */
  --rule: rgba(59, 38, 32, .15);   /* dividers between rows */
  --rule-on-dark: rgba(255, 251, 244, .2);

  /* Status (decided 12 October 2026, option B): errors and destructive confirmations only. Confirmations use the latte .notice */
  --error: #9F2A1F;

  /* Node palette: nodes only, never type, buttons or backgrounds */
  --node-deep: #0070A6;   --node-deep-light: #C7DCE3;
  --node-sea: #318F5A;    --node-sea-light: #D2E3D2;
  --node-dusk: #926ABE;   --node-dusk-light: #E7DBE8;

  /* Spacing scale: use these values only */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Radius */
  --r-field: 10px;
  --r-card: 12px;
  --r-large: 16px;
  --r-panel: 24px;
  --r-pill: 999px;

  /* Type */
  --font-display: 'Instrument Sans', system-ui, sans-serif;
  --font-body: 'Fira Sans', system-ui, sans-serif;
  --t-display: 56px; --t-h1: 40px; --t-h2: 32px; --t-h3: 24px;
  --t-body-l: 18px; --t-body: 16px; --t-small: 14px; --t-label: 12px;

  /* Sizes */
  --control-h: 52px;   /* buttons and fields */
  --target: 44px;      /* minimum touch target */
  --form-w: 440px;     /* single form column */
}