/* Mushroom design tokens, the single source of truth for the site's palette.
   Every page links this first, before its own stylesheet. Never hardcode a hex
   value anywhere else: if you only use tokens, light and dark both work for free.
   See DESIGN.md in the app repo (../DESIGN.md) for what each one is for.

   One deliberate copy of this block exists at ds/src/styles.css, because that file
   is bundled by esbuild for claude.ai/design and cannot reach a sibling file.
   Change one, port to the other. .design-sync/NOTES.md tracks that mirror. */

:root {
  /* surfaces */
  --bg: #f6ecd8;
  --bg2: #efe1c6;
  --card: #fffaf0;
  --tint: color-mix(in srgb, var(--red) 9%, var(--card));
  /* text */
  --ink: #4a3226;
  --ink2: #7d6252;
  /* brand */
  --red: #d0342c;
  --red-ink: #fff;
  --spot: #fff;
  /* lines + focus */
  --line: #dcc9a8;
  --ring: #d0342c;
  /* elevation */
  --shadow: rgba(74, 50, 38, .13);
  --shadow-sm: 0 1px 2px rgba(74, 50, 38, .06), 0 2px 6px rgba(74, 50, 38, .07);
  --shadow-md: 0 4px 10px rgba(74, 50, 38, .09), 0 10px 24px rgba(74, 50, 38, .11);
  --shadow-lg: 0 8px 20px rgba(74, 50, 38, .11), 0 24px 48px rgba(74, 50, 38, .15);
  /* radius */
  --radius-card: 18px;
  --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17120f;
    --bg2: #221913;
    --card: #241b15;
    --tint: color-mix(in srgb, var(--red) 15%, var(--card));
    --ink: #f3e7d4;
    --ink2: #b39f8b;
    --red: #e8524a;
    --red-ink: #1a0d0b;
    --spot: #ffeede;
    --line: #3b2d23;
    --ring: #e8524a;
    --shadow: rgba(0, 0, 0, .5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .32);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .44);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, .45), 0 24px 48px rgba(0, 0, 0, .55);
  }
}