/*
 * Design tokens.
 *
 * Values transcribed from the Claude Design source in
 * deploy/woo-demo-store/design/. The paper ground is matched to the product
 * photography, which is rendered on #EDEBE7. A mismatch here reads as a halo
 * around every product image, so these two are a pair rather than two choices.
 */

:root {
  /* Ground */
  --roam-paper: #efece5;
  --roam-paper-raised: #f7f5f0;
  --roam-paper-sunk: #e6e2d9;
  --roam-ink: #16150f;
  --roam-ink-deep: #0c0b07;

  /* Text */
  --roam-text: #16150f;
  --roam-text-strong: #3a382e;
  --roam-text-muted: #4a473d;
  --roam-text-soft: #6b675b;
  --roam-text-faint: #8a8578;

  /* Line work */
  --roam-rule: rgba(22, 21, 15, 0.13);
  --roam-rule-strong: rgba(22, 21, 15, 0.2);

  /* Accent */
  --roam-accent: #1f5548;
  --roam-accent-bright: #7ecfb8;
  --roam-sale: #b7791f;
  --roam-warn: #a85a32;

  /* Type */
  --roam-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --roam-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rhythm */
  --roam-gutter: 32px;
  --roam-max: 1320px;
  --roam-radius: 3px;
}

@media (max-width: 720px) {
  :root {
    --roam-gutter: 18px;
  }
}