/*
 * Pugamochi manual theming.
 * Layered on top of the Web Awesome default theme: we override a handful of
 * Web Awesome design tokens with the storybook/scrapbook palette and the
 * "no sharp corners" radii from the design brief.
 */

:root {
  /* ── Palette (possible-ui.md) ───────────────────────────────────────── */
  --pg-cream: #f6f1e7;
  --pg-tan: #d8c3a5;
  --pg-sage: #a8bba3;
  --pg-blue: #7c9cbf;
  /* Darker blue for interactive TEXT on the paper background: #7c9cbf is only
     2.8:1 there (fails WCAG AA); this clears 4.5:1 (≈5.8:1). */
  --pg-blue-ink: #46668c;
  --pg-coral: #d9a58b;

  --pg-ink: #4a4036; /* warm near-black for text */
  --pg-ink-soft: #6f6353;
  --pg-paper: #fffdf8; /* card surface, a touch lighter than the cream bg */
  --pg-line: #e7ddca; /* hairline borders */

  /* Per-stat accent colours (used by vines/icons) */
  --pg-stat-curiosity: var(--pg-blue);
  --pg-stat-energy: var(--pg-coral);
  --pg-stat-comfort: var(--pg-tan);
  --pg-stat-friendship: #c98a8a;
  --pg-stat-wisdom: #9a86b8;
  --pg-stat-mischief: #d8a85a;
  --pg-stat-contentment: var(--pg-sage);

  /* ── Map our palette onto Web Awesome theme tokens ──────────────────── */
  --wa-color-brand-fill-loud: var(--pg-sage);
  --wa-color-brand-fill-normal: var(--pg-sage);
  --wa-color-brand-on-loud: #ffffff;
  --wa-color-surface-default: var(--pg-paper);
  --wa-color-surface-raised: var(--pg-paper);
  --wa-color-text-normal: var(--pg-ink);
  --wa-color-text-quiet: var(--pg-ink-soft);

  /* ── Radii: absolutely no sharp corners ─────────────────────────────── */
  --pg-radius: 24px; /* general */
  --pg-radius-card: 32px; /* cards */
  --pg-radius-pill: 999px; /* buttons */

  --wa-border-radius-m: var(--pg-radius);
  --wa-border-radius-l: var(--pg-radius-card);
  --wa-border-radius-pill: var(--pg-radius-pill);

  /* ── Typography & spacing ───────────────────────────────────────────── */
  --pg-font:
    "Quicksand", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pg-space: 1rem;
  --pg-shadow-soft: 0 10px 30px rgba(74, 64, 54, 0.12);
  --pg-shadow-card: 0 6px 18px rgba(74, 64, 54, 0.1);
}