/*
 * Humble Pie Chart design tokens and base styles.
 * Source of truth: humble-pie-design-system/css/tokens.css. Don't edit copies inside a site;
 * change it here and run `python sync.py <site folder>`.
 */
:root {
  /* Surfaces and text */
  --bg: #F4F5F8;          /* page background: cool "slide deck" gray */
  --card: #FFFFFF;        /* cards, panels, inputs on top of --bg */
  --ink: #1C2030;         /* primary text */
  --muted: #5B6274;       /* secondary text, captions, stats */
  --rule: #DCDFE7;        /* borders and dividers */

  /* Brand accent: cherry. Primary buttons, links, eyebrows, the top score band */
  --accent: #C2362F;
  --accent-soft: #FBE6E3; /* tinted backgrounds: banners, drop targets */
  --on-accent: #FFFFFF;   /* text on --accent */

  /* Highlight: "Heaping" band only */
  --hi: #F2C53D;
  --on-hi: #1C1A10;

  /* Pie slices, in rank order (s1 = biggest habit). Use them only for pie data. */
  --s1: #C2362F;          /* cherry */
  --s2: #3B50A8;          /* blueberry */
  --s3: #E07B26;          /* pumpkin */
  --s4: #7FA830;          /* key lime */
  --s5: #7A3E7E;          /* plum */
  --chill: #E3E6ED;       /* "Plain Crust" slice, empty bar tracks */
  --crumbs: #C4AE8C;      /* crust: reserved for an "everything else" slice */

  /* Type */
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;  /* headlines, labels, buttons */
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;    /* running text */
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;           /* numbers, eyebrows, stats, code */

  /* Shape */
  --radius-card: 14px;
  --radius-inner: 12px;
  --radius-control: 8px;
  --radius-pill: 999px;

  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111319; --card: #1A1D25; --ink: #E8EAF0; --muted: #9AA1B2; --rule: #2B2F3A;
    --accent: #E5655C; --accent-soft: #3A1E1C; --on-accent: #1A0B0A; --hi: #E8BB34; --on-hi: #1C1A10;
    --s1: #E5655C; --s2: #8193E6; --s3: #F29A50; --s4: #A6CC5A; --s5: #B67FBB; --crumbs: #9C8667; --chill: #2E3340;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111319; --card: #1A1D25; --ink: #E8EAF0; --muted: #9AA1B2; --rule: #2B2F3A;
  --accent: #E5655C; --accent-soft: #3A1E1C; --on-accent: #1A0B0A; --hi: #E8BB34; --on-hi: #1C1A10;
  --s1: #E5655C; --s2: #8193E6; --s3: #F29A50; --s4: #A6CC5A; --s5: #B67FBB; --crumbs: #9C8667; --chill: #2E3340;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
img { max-width: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.55; }
a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Page width with the safe side gutter. Apps use the default; reading pages add .wrap-read inside. */
.wrap {
  max-width: 1240px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wrap-read { max-width: 880px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}