/* GENERATED from brand/tokens.css by scripts/sync_brand.sh: do not edit here. Google Fonts @import replaced by self-hosted woff2 (CSP font-src 'self'). */
@font-face { font-family: "Dela Gothic One"; src: url("/fonts/dela-gothic-one-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Azeret Mono"; src: url("/fonts/azeret-mono-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
/* FLONK brand tokens — LOCKED v1 (source: brand/DIRECTION.md). Don't add colors without the Creative Director. */
:root {
  --sky-pop: #2DB4FF;    /* main full-bleed field */
  --ultra-ink: #1414B8;  /* text, outlines, hard shadows */
  --ice: #E6F6FF;        /* cards, panels */
  --white: #FFFFFF;
  --flonk-pink: #FF3B8D; /* hot accent: primary CTA, FLONK! bubbles, live badge ONLY */
  --shiba-tan: #E8B07A;  /* only on the dog, never a surface */
  --pump: #00C27A;       /* price up, data only */
  --dump: #E8173C;       /* price down, data only */
  --deep-end: #0B0B5E;   /* dark-mode field (never near-black) */

  --font-display: 'Dela Gothic One', system-ui, sans-serif;
  --font-body: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-mono: 'Azeret Mono', ui-monospace, monospace;

  --border: 3px solid var(--ultra-ink);
  --shadow-hard: 6px 6px 0 var(--ultra-ink); /* no blur, ever */
  --tilt: 1.5deg;                             /* sticker cards: alternate ±1–2deg */
  --dur-fast: 120ms;
  --dur: 220ms;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* overshoot "spring" */
}
/* "flonk" press: the button drops into its shadow */
.btn-slab { border: var(--border); box-shadow: var(--shadow-hard); transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast); }
.btn-slab:active { transform: translate(6px, 6px) scaleY(.94); box-shadow: 0 0 0 var(--ultra-ink); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }