:root {
  /* Color — pencil sketch on squared paper */
  --paper:  #FBFBF8;  /* surface */
  --grid:   #D9D9D4;  /* paper squares */
  --paper-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M23.5 0V23.5H0' fill='none' stroke='%23D9D9D4'/%3E%3C/svg%3E");
  --pencil: #262626;  /* drawn lines: arrows, floor */
  --tag:    #66665F;  /* grey title tag, top left (5.6:1 with paper text) */
  --chalk:  #FFFFFF;  /* cards, drawer */
  --ink:    #1C211F;  /* text */
  --seam:   #6B6B66;  /* helper text, prices */
  --thread: #2E47D1;  /* accent: active seam line, buttons, focus */
  --thread-ink: #FFFFFF;

  /* Type — Archivo (Google Fonts, variable: wght 100–900, wdth 62–125) */
  --font: "Archivo", system-ui, sans-serif;
  --hand: "Patrick Hand", "Segoe Print", cursive;  /* headline, labels, notes */
  --narrow: 62%;             /* stopwatch digits */
  --display-stretch: 125%;   /* headlines and prices only */
  --step--1: 0.833rem;
  --step-0:  1rem;
  --step-1:  1.2rem;
  --step-2:  1.44rem;
  --step-3:  2.074rem;
  --step-4:  2.986rem;

  /* Space */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-chip: 999px;
  --radius-card: 6px;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-hover: 200ms;
  --dur-card: 180ms;
  --dur-drawer: 360ms;
}