/*
  Kit visual PNB / WURST — tokens e componentes base.
  Portado de kit-visual-pnb-wurst/componentes-site.html para reutilização no jogo.
  Ver docs/DESIGN.md para a origem de cada token e regra de uso.
*/

:root {
  color-scheme: light;
  --ink: #0f1112;
  --ink-soft: #202426;
  --ink-muted: #5f6668;
  --paper: #fbfcfd;
  --white: #ffffff;
  --signal: #00b388;
  --signal-dark: #00825d;
  --wurst-signal: #2ff6c1;
  --cyan: #45d6ff;
  --red: #ff6584;
  --amber: #ffc27a;
  --highlight: #e6f7f1;
  --line: rgba(15, 17, 18, 0.1);
  --line-heavy: rgba(15, 17, 18, 0.18);
  --grid: rgba(15, 17, 18, 0.035);
  --font-display: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 4px;
  --radius-md: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { overflow-x: hidden; }

body {
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(0, 179, 136, 0.09), transparent 38%),
    var(--paper);
  background-size: 42px 42px, 42px 42px, auto, auto;
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.mono, .eyebrow, code, .doc-badge {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eyebrow {
  color: rgba(15, 17, 18, 0.48);
  font-size: 10px;
  font-weight: 700;
}

.doc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-heavy);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: rgba(15, 17, 18, 0.62);
  font-size: 10px;
  font-weight: 700;
}

.doc-badge::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(0, 179, 136, 0.11);
  content: '';
}

.doc-badge.amber::before { background: var(--amber); box-shadow: 0 0 0 4px rgba(255, 194, 122, 0.18); }
.doc-badge.red::before { background: var(--red); box-shadow: 0 0 0 4px rgba(255, 101, 132, 0.18); }

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 0 18px;
  color: var(--ink);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary { border-color: var(--signal); background: var(--signal); color: #04221a; }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-ghost { border-color: rgba(15, 17, 18, 0.22); background: rgba(255, 255, 255, 0.6); }
.btn-danger { border-color: var(--red); color: var(--red); background: transparent; }
.btn-block { width: 100%; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 10px; }

/* Cards */
.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(251, 252, 253, 0.92);
  padding: 20px;
  box-shadow: 0 18px 54px rgba(15, 17, 18, 0.06);
}
.card::before {
  position: absolute;
  left: 0; right: 0; top: 0; height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 360ms var(--ease);
  content: '';
}
.card.hover-line:hover::before,
.card:focus-within::before { transform: scaleX(1); }

.muted { color: rgba(15, 17, 18, 0.62); line-height: 1.58; }

/* Formulários */
label { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(15,17,18,0.5); margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"] {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-heavy);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
}
input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(0,179,136,0.14); }

.field { display: grid; gap: 6px; margin-bottom: 16px; }

/* Badges de status */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.pill-signal { background: var(--highlight); color: var(--signal-dark); }
.pill-amber { background: rgba(255,194,122,0.22); color: #8a5a12; }
.pill-red { background: rgba(255,101,132,0.16); color: #a4133c; }

::selection { background: var(--highlight); color: var(--ink); }