/* ================================================================ */
/* poyo — tokens.css                                     */
/* Generated by sampo-build.py. DO NOT HAND-EDIT.                */
/* Source: poyo.tokens.json (W3C DTCG) is canonical.              */
/* tokens.json is derived. Edit the DTCG file, re-run build.      */
/* ================================================================ */
/* sampo-fingerprint: brand=poyo | slug=poyo | ground=dark | accent=#FFFFFF | display=Unbounded */

@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded-latin-500-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-400-700.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === brand — Sampo v1 Layer A === */
  --black: #000000;
  --surface: #0E0E0E;
  --white: #FFFFFF;

  --ink-ground: #000000;
  --paper-ground: #FFFFFF;
  --accent: #FFFFFF;
  --muted: #0E0E0E;

  --font-display: 'Unbounded', sans-serif;
  --font-weight-display: 700;
  --font-subtitle: 'IBM Plex Mono', monospace;
  --font-weight-subtitle: 400;
  --font-body: 'Manrope', Arial, sans-serif;
  --font-weight-body: 400;

  --fs-hero: 96px;
  --fs-display: 64px;
  --fs-h1: 44px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-caption: 12px;
  --fs-label: 11px;
  --fs-ratio: 1.5;

  --space-unit: 8px;
  --space-0: 0px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 160px;

  --radius-none: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;

  /* === Layer B — derived by sampo-build.py (do not hand-edit) === */

  /* B1: Surface ramp */
  --surface-1: #141414;
  --surface-2: #262626;
  --surface-3: #383838;

  /* B2: Alpha derivatives (fallback + live) */
  --paper-ghost: rgba(255,255,255,0.06);                              /* fallback */
  --paper-ghost: color-mix(in srgb, rgb(255,255,255) 6%, transparent);  /* live */
  --paper-border: rgba(255,255,255,0.12);                              /* fallback */
  --paper-border: color-mix(in srgb, rgb(255,255,255) 12%, transparent);  /* live */
  --paper-hover: rgba(255,255,255,0.16);                              /* fallback */
  --paper-hover: color-mix(in srgb, rgb(255,255,255) 16%, transparent);  /* live */
  --ink-ghost: rgba(0,0,0,0.06);                              /* fallback */
  --ink-ghost: color-mix(in srgb, rgb(0,0,0) 6%, transparent);  /* live */
  --ink-border: rgba(0,0,0,0.12);                              /* fallback */
  --ink-border: color-mix(in srgb, rgb(0,0,0) 12%, transparent);  /* live */
  --ink-hover: rgba(0,0,0,0.16);                              /* fallback */
  --ink-hover: color-mix(in srgb, rgb(0,0,0) 16%, transparent);  /* live */
  --accent-dim: rgba(255,255,255,0.18);                              /* fallback */
  --accent-dim: color-mix(in srgb, rgb(255,255,255) 18%, transparent);  /* live */
  --accent-border: rgba(255,255,255,0.35);                              /* fallback */
  --accent-border: color-mix(in srgb, rgb(255,255,255) 35%, transparent);  /* live */

  /* B3: Semantic status palette (brand-tunable via tokens.json `status`) */
  --green: #5BA676;
  --green-dim: rgba(91,166,118,0.12);                      /* fallback */
  --green-dim: color-mix(in srgb, rgb(91,166,118) 12%, transparent);                       /* live */
  --amber: #BE8C1E;
  --amber-dim: rgba(190,140,30,0.12);                      /* fallback */
  --amber-dim: color-mix(in srgb, rgb(190,140,30) 12%, transparent);                       /* live */
  --error: #C5583C;
  --error-dim: rgba(197,88,60,0.12);                      /* fallback */
  --error-dim: color-mix(in srgb, rgb(197,88,60) 12%, transparent);                       /* live */
  --info: #4D7A97;
  --info-dim: rgba(77,122,151,0.12);                      /* fallback */
  --info-dim: color-mix(in srgb, rgb(77,122,151) 12%, transparent);                       /* live */

  /* B3b: On-fill foregrounds (stable, not a reused --paper) */
  --on-dark: #F5F5F2;
  --on-accent: #0E0E0E;

  /* B4: Motion tokens */
  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --dur-fast: 150ms;
  --dur-normal: 300ms;
  --stagger-step: 40ms;

  /* B5: Animated background gradient stops */
  --bg-gradient-stops: #000000, #000000, #383838, #FFFFFF;
}