/* ============================================================
   PodVCR — Design Tokens
   Single source of truth. All screens import this file.
   ============================================================ */

/* Self-hosted fonts. Antonio + Space Grotesk are variable fonts
   so one file serves every weight we declare. */
@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/Antonio.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/SpaceGrotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/VT323.woff2') format('woff2');
}

:root {
  /* ---------- COLOR ---------- */
  --ink:        #0B0B0C;
  --ink-2:      #141416;
  --ink-3:      #1E1E22;
  --ink-4:      #2A2A30;
  --ink-5:      #3A3A42;

  --bone:       #EFE8D8;
  --bone-2:     #D8D2C2;
  --bone-3:     #9A9588;
  --bone-4:     #6A6658;

  --rec:        #E5341F;
  --rec-deep:   #B01E0E;
  --rec-glow:   #FF5A44;
  --amber:      #F5B544;
  --amber-deep: #C48A1F;
  --amber-glow: #FFD27A;
  --green-led:  #34D98A;
  --green-deep: #1F8E55;

  --bg:         var(--ink);
  --surface:    var(--ink-2);
  --surface-2:  var(--ink-3);
  --border:     var(--ink-4);
  --border-hi:  var(--ink-5);
  --text:       var(--bone);
  --text-2:     var(--bone-2);
  --text-3:     var(--bone-3);
  --text-4:     var(--bone-4);
  --accent:     var(--rec);

  /* ---------- TYPE ---------- */
  --font-display: 'Antonio', 'Helvetica Neue', Impact, sans-serif;
  --font-ui:      'Space Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'VT323', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --fs-4xl: 56px;
  --fs-5xl: 84px;
  --fs-6xl: 128px;

  /* ---------- SPACE / RADIUS / SHADOW ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-xl: 10px;

  --bezel-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 1px 0 rgba(0,0,0,0.4);

  --led-glow-red:   0 0 12px rgba(229,52,31,0.65), 0 0 2px rgba(229,52,31,0.9);
  --led-glow-amber: 0 0 12px rgba(245,181,68,0.55), 0 0 2px rgba(245,181,68,0.8);
  --led-glow-green: 0 0 12px rgba(52,217,138,0.55), 0 0 2px rgba(52,217,138,0.8);
}

/* ---------- BASE ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scanline texture — applied via body::before, opt-in with .scanlines */
body.scanlines::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: overlay;
}

/* Tape grain — subtle noise, opt-in with .grain */
body.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
}

/* ---------- TYPE UTILITIES ---------- */
.t-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 0.95; text-transform: uppercase; }
.t-mono    { font-family: var(--font-mono); letter-spacing: 0.02em; }
.t-label   { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.t-eyebrow { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }

/* ---------- PRIMITIVES ---------- */

/* LED dot */
.led {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rec);
  box-shadow: var(--led-glow-red);
  vertical-align: middle;
}
.led.amber { background: var(--amber); box-shadow: var(--led-glow-amber); }
.led.green { background: var(--green-led); box-shadow: var(--led-glow-green); }
.led.off   { background: #3a2a28; box-shadow: none; }
.led.blink { animation: led-blink 1.4s steps(2, end) infinite; }
@keyframes led-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.2; } }

/* Hardware button */
.hw-btn {
  --hw-bg: #2A2A30;
  --hw-bg-2: #16161a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 38px;
  padding: 0 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(180deg, var(--hw-bg) 0%, var(--hw-bg-2) 100%);
  border: 1px solid #000;
  border-radius: var(--r-sm);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -2px 0 rgba(0,0,0,0.5),
    0 2px 0 #000,
    0 3px 6px rgba(0,0,0,0.6);
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
  user-select: none;
  text-decoration: none;
}
.hw-btn:hover { --hw-bg: #32323a; }
.hw-btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.6),
    0 0 0 #000;
}
.hw-btn.primary { --hw-bg: #E5341F; --hw-bg-2: #9B1E0E; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.35); }
.hw-btn.primary:hover { --hw-bg: #ff442c; }
.hw-btn.danger  { --hw-bg: #E5341F; --hw-bg-2: #6a1006; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); }
.hw-btn.danger:hover { --hw-bg: #ff442c; }
.hw-btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
  box-shadow: none;
  color: var(--text-2);
}
.hw-btn.ghost:hover { border-color: var(--border-hi); color: var(--text); }
.hw-btn[disabled], .hw-btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.hw-btn.sm { height: 30px; font-size: 11px; padding: 0 10px; }
.hw-btn.lg { height: 48px; font-size: 13px; padding: 0 20px; }

/* Inputs */
.vcr-input, .vcr-select, .vcr-textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text);
  background: #08080a;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  outline: none;
}
.vcr-textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.vcr-input:focus, .vcr-select:focus, .vcr-textarea:focus {
  border-color: var(--rec);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 0 2px rgba(229,52,31,0.2);
}
.vcr-input::placeholder, .vcr-textarea::placeholder { color: var(--text-4); }

/* Timecode readout */
.timecode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1;
  color: var(--amber);
  background: #050506;
  border: 1px solid #000;
  border-radius: var(--r-sm);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.8),
    inset 0 0 0 1px rgba(245,181,68,0.06);
  text-shadow: 0 0 8px rgba(245,181,68,0.55);
  letter-spacing: 0.08em;
}
.timecode.red   { color: var(--rec-glow); text-shadow: 0 0 8px rgba(229,52,31,0.55); }
.timecode.green { color: var(--green-led); text-shadow: 0 0 8px rgba(52,217,138,0.55); }
.timecode.sm    { font-size: 14px; padding: 3px 8px; }

/* Chip / tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  height: 24px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.chip.rec    { color: var(--rec);   border-color: rgba(229,52,31,0.35);   background: rgba(229,52,31,0.08); }
.chip.amber  { color: var(--amber); border-color: rgba(245,181,68,0.35);  background: rgba(245,181,68,0.08); }
.chip.green  { color: var(--green-led); border-color: rgba(52,217,138,0.35); background: rgba(52,217,138,0.08); }

/* Card — slight metallic bezel */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 2px 0 #000,
    0 6px 20px rgba(0,0,0,0.35);
}

/* Seam divider */
.seam {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 10%, var(--border) 90%, transparent);
  border-top: 1px solid rgba(255,255,255,0.02);
}

/* Reel spin */
@keyframes reel-spin { to { transform: rotate(360deg); } }
.reel-spin { animation: reel-spin 3s linear infinite; transform-origin: center; }
.reel-spin-slow { animation: reel-spin 6s linear infinite; transform-origin: center; }

/* Focus */
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }