/* brand/tokens.css - PIKR's colors, fonts and shapes in one place (brand/BRAND.md).
   Light or dark follows the phone's setting: prefers-color-scheme, no in-app toggle.
   Screens use the semantic tokens (--bg, --text, --accent ...), never raw hex values.
   ASCII only, like all source (CLAUDE.md section 10). */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("./fonts/BigShouldersDisplay-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("./fonts/HankenGrotesk-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Palette: the named brand colors. Prefer the semantic tokens below in screens. */
  --pikr-amp-orange: #FF5A1F;
  --pikr-ember: #AD380A;
  --pikr-peach: #FFB38F;
  --pikr-stage-black: #16130F;
  --pikr-coal: #221D18;
  --pikr-ash: #3A342D;
  --pikr-stone: #A39B90;
  --pikr-cream: #F3EDE2;
  --pikr-sand: #E8E0D2;
  --pikr-dune: #CFC4B3;
  --pikr-umber: #5E564D;

  /* Type */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape */
  --radius-control: 12px; /* buttons, inputs, point chips */
  --radius-row: 14px; /* list rows */
  --radius-card: 18px; /* cards, sheets, notifications */
  --tap: 44px; /* smallest touch target (CLAUDE.md section 10) */

  /* Semantic colors: light (the default) */
  --bg: #F3EDE2;
  --surface: #E8E0D2;
  --border: #CFC4B3;
  --border-strong: #857A6D;
  --text: #16130F;
  --muted: #5E564D;
  --accent: #FF5A1F;
  --accent-text: #16130F;
  --accent-ink: #AD380A;
  --good: #1E6B37;
  --bad: #B3261E;
  --focus: #16130F;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16130F;
    --surface: #221D18;
    --border: #3A342D;
    --border-strong: #7A7064;
    --text: #F3EDE2;
    --muted: #A39B90;
    --accent: #FF5A1F;
    --accent-text: #16130F;
    --accent-ink: #FF5A1F;
    --good: #5FD38A;
    --bad: #FF8A80;
    --focus: #F3EDE2;
  }
}