/* ============================================================
   PauseBTN design system — vendored tokens.

   Verbatim concatenation of the Claude Design project
   "PauseBTN Design System" (8859add3-645e-44d1-9808-8ca9c01d9c24):
     tokens/fonts.css, colors.css, typography.css,
     spacing.css, effects.css, motion.css

   Treat as a vendored package. Do not hand-edit — re-pull from
   the design project instead. Site-specific styles live in
   assets/site.css.
   ============================================================ */

/* ---------- tokens/fonts.css ---------- */
/* Webfonts. No vendor font binaries were provided, so PauseBTN rides on
   Google Fonts: Bungee (display), Karla (text/UI), Kalam (handwriting), Space Mono (mono). */
@import url("https://fonts.googleapis.com/css2?family=Bungee&family=Karla:ital,wght@0,400..800;1,400..800&family=Kalam:wght@400;700&family=Space+Mono:wght@400;700&display=swap");

:root{
  --font-display:"Bungee","Arial Black",system-ui,sans-serif;
  --font-text:"Karla","Helvetica Neue",Arial,sans-serif;
  --font-hand:"Kalam","Comic Sans MS",cursive;
  --font-mono:"Space Mono",ui-monospace,monospace;
}

/* ---------- tokens/colors.css ---------- */
:root{
  /* ---- Base palette: paper + ink ---- */
  --paper-0:#FFFAF0;      /* brightest sheet */
  --paper-1:#FBF3E4;      /* default page cream */
  --paper-2:#F2E6CE;      /* card tint / sunken */
  --paper-3:#E4D3B2;      /* rules, deckle edges */
  --ink-0:#241C15;        /* near-black brown ink */
  --ink-1:#3D3126;
  --ink-2:#6B5B49;        /* muted body */
  --ink-3:#9C8B76;        /* hints, disabled */

  /* ---- Brand hues ---- */
  --orange-1:#FFB48C; --orange-2:#F4712F; --orange-3:#E84E1B; --orange-4:#B0330D;
  --denim-1:#7FA8BF;  --denim-2:#33718F;  --denim-3:#1F5673;  --denim-4:#123D53;
  --cherry-1:#F58598; --cherry-2:#E24157; --cherry-3:#D62246; --cherry-4:#9C0F2C;
  --mustard-1:#FFD97A; --mustard-2:#F2B01E; --mustard-3:#D6900B;
  --pine-1:#84B79A;   --pine-2:#3F8B63;   --pine-3:#2C6E49;   --pine-4:#1B4A30;
  --grape-3:#7B3F9E;

  /* ---- Semantic surfaces ---- */
  --surface-page:var(--paper-1);
  --surface-card:var(--paper-0);
  --surface-sunken:var(--paper-2);
  --surface-invert:var(--ink-0);
  --surface-accent:var(--orange-3);
  --surface-cool:var(--denim-3);

  /* ---- Semantic text ---- */
  --text-strong:var(--ink-0);
  --text-body:var(--ink-1);
  --text-muted:var(--ink-2);
  --text-hint:var(--ink-3);
  --text-on-accent:var(--paper-0);
  --text-on-invert:var(--paper-1);
  --text-link:var(--cherry-3);
  --text-link-hover:var(--orange-3);

  /* ---- Lines & edges ---- */
  --line-ink:var(--ink-0);
  --line-soft:var(--paper-3);
  --line-accent:var(--orange-3);

  /* ---- Status ---- */
  --status-good:var(--pine-3);
  --status-warn:var(--mustard-3);
  --status-bad:var(--cherry-3);
  --status-info:var(--denim-3);

  /* ---- Play-state chips (game catalogue) ---- */
  --state-playable:var(--pine-3);
  --state-wip:var(--mustard-2);
  --state-shelved:var(--ink-3);
}

/* ---------- tokens/typography.css ---------- */
:root{
  /* Sizes — display steps are deliberately big and few. */
  --fs-display-xl:clamp(3rem,8vw,6.5rem);
  --fs-display-l:clamp(2.4rem,5vw,4rem);
  --fs-display-m:2.25rem;
  --fs-title:1.5rem;
  --fs-lead:1.25rem;
  --fs-body:1.0625rem;   /* 17px */
  --fs-small:0.9375rem;  /* 15px */
  --fs-micro:0.8125rem;  /* 13px */

  --lh-display:0.92;
  --lh-title:1.15;
  --lh-body:1.55;

  --ls-display:0.01em;   /* Bungee is wide already */
  --ls-eyebrow:0.16em;
  --ls-body:0;

  --fw-text:450;
  --fw-text-strong:700;
  --fw-text-black:800;

  /* Semantic roles */
  --type-display:var(--fw-text) var(--fs-display-xl)/var(--lh-display) var(--font-display);
  --type-heading:800 var(--fs-title)/var(--lh-title) var(--font-text);
  --type-body:var(--fw-text) var(--fs-body)/var(--lh-body) var(--font-text);
  --type-hand:400 var(--fs-lead)/1.3 var(--font-hand);
  --type-mono:400 var(--fs-micro)/1.4 var(--font-mono);
}

/* ---------- tokens/spacing.css ---------- */
:root{
  --sp-0:0; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  --gutter:var(--sp-5);
  --section-y:var(--sp-9);
  --measure:64ch;          /* max body line length */
  --page-max:1200px;
  --control-h:48px;        /* default hit target */
  --control-h-sm:36px;
  --control-h-lg:60px;
}

/* ---------- tokens/effects.css ---------- */
:root{
  /* Corners: mostly generous, never pill-uniform. Sticker shapes get the big ones. */
  --r-0:0; --r-1:3px; --r-2:8px; --r-3:14px; --r-4:22px; --r-pill:999px;

  /* Ink outlines: the single most identifying PauseBTN trait. */
  --border-ink:2.5px solid var(--line-ink);
  --border-ink-thick:4px solid var(--line-ink);
  --border-soft:1.5px solid var(--line-soft);

  /* Hard offset "block print" shadows — no blur, ever, on brand chrome. */
  --shadow-block-1:3px 3px 0 var(--ink-0);
  --shadow-block-2:6px 6px 0 var(--ink-0);
  --shadow-block-3:10px 10px 0 var(--ink-0);
  --shadow-block-accent:6px 6px 0 var(--orange-3);
  /* One soft shadow, reserved for floating overlays only. */
  --shadow-float:0 18px 40px -12px rgba(36,28,21,.42);
  --shadow-inset-press:inset 0 3px 0 rgba(36,28,21,.22);

  /* Paper textures — grain + halftone dots, layered under content. */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.35'/></svg>");
  --dots:radial-gradient(var(--ink-0) 1.3px, transparent 1.4px);
  --dots-size:10px 10px;
  --stitch:repeating-linear-gradient(90deg,var(--paper-0) 0 6px,transparent 6px 12px);

  --tilt-a:-2.2deg; --tilt-b:1.6deg; --tilt-c:-1deg;
  --focus-ring:0 0 0 3px var(--mustard-1),0 0 0 6px var(--ink-0);
}

/* ---------- tokens/motion.css ---------- */
:root{
  --dur-1:90ms; --dur-2:160ms; --dur-3:280ms; --dur-4:520ms;
  --ease-snap:cubic-bezier(.2,.9,.2,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --press-shift:2px;      /* how far a control drops into its shadow */
  --hover-lift:-2px;
}