/* Puerto Revista — Krasht brand tokens (project-owned, seeded from
   Krasht_Portfolio/src/styles/global.css). Tokens + font only; the heavy
   portfolio effects (CRT, cursor, ripple) are deliberately left out so the
   capture app stays fast. Keep this file identical to static/tokens.css. */

@font-face {
  font-family: 'Recursive';
  src: url('fonts/recursive.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color */
  --c-bg: #0e0204;
  --c-surface: #170406;
  --c-surface-2: #1f070a;
  --c-border: rgba(255, 255, 255, 0.10);
  --c-border-strong: rgba(255, 255, 255, 0.20);
  --c-text: #ffffff;
  --c-text-muted: rgba(255, 255, 255, 0.78);
  --c-text-faint: rgba(255, 255, 255, 0.62);

  --c-accent: #a51d1d;
  --c-accent-deep: #7a1515;
  --c-accent-ink: #fff8e1;
  --c-paper: #fff8e1;

  --c-success: #5ef08a;
  --c-success-ink: #06210f;
  --c-warn: #e0a23a;
  --c-warn-ink: #2a1d06;

  /* Error — hot orange-red, distinct from the brand-red accent and the amber
     warn; used as an OUTLINED chip (+ glyph) so hue isn't the only signal. */
  --c-error: #ff4d00;
  --c-error-tint: #2a0e00;
  --c-error-text: #ff7a3d;

  /* Phosphor glow presets (opt-in per element, reduced-motion-gated). */
  --glow-title: 0 0 10px rgba(255, 120, 60, 0.45), 0 0 26px rgba(255, 80, 30, 0.28);
  --glow-accent: 0 0 14px rgba(255, 80, 30, 0.35);

  /* Type scale — gentle fluid (phones ~320–430px, small vw coefficient). */
  --fs-xs: clamp(11px, 10.5px + 0.3vw, 12px);
  --fs-sm: clamp(12px, 11.5px + 0.4vw, 13px);
  --fs-md: clamp(15px, 14.5px + 0.6vw, 17px);
  --fs-lg: clamp(17px, 16px + 0.8vw, 19px);
  --fs-xl: clamp(20px, 18px + 1.2vw, 24px);
  --fs-2xl: clamp(24px, 21px + 2vw, 30px);

  /* Spacing scale — small steps fixed, larger steps breathe with viewport. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: clamp(14px, 12px + 1vw, 18px);
  --sp-5: clamp(18px, 15px + 1.5vw, 24px);
  --sp-6: clamp(22px, 18px + 2vw, 30px);
  --sp-7: 36px;
  --sp-8: 48px;

  /* Radii + weights (match Krasht). */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --w-regular: 400;
  --w-medium: 600;
  --w-bold: 800;

  --font-sans: 'Recursive', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Recursive's "machine" voice — its MONO axis. Reserved for labels, chips,
   counts, timestamps, and the clock; never body/inputs/names. */
.mono {
  font-variation-settings: 'MONO' 1, 'CASL' 0, 'slnt' 0;
}