/* The Nothing — component CSS
 * Static extraction of the design-system's React component styles
 * (components/core/Button.jsx, Tag.jsx, Card.jsx, forms/Input.jsx),
 * recreated as plain CSS per HANDOFF.md for a non-React codebase. */

/* ---------- Button ---------- */
.tn-btn {
  --_bg: var(--paper-900); --_fg: var(--ink-900); --_bd: var(--paper-900);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--font-sans); font-weight: 900; text-transform: uppercase;
  letter-spacing: .06em; line-height: 1; text-decoration: none; cursor: pointer;
  border: var(--border) solid var(--_bd); background: var(--_bg); color: var(--_fg);
  border-radius: var(--radius-0); box-shadow: var(--shadow-hard-sm);
  transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap), background var(--dur) var(--ease-snap), color var(--dur) var(--ease-snap);
  -webkit-appearance: none; appearance: none;
}
.tn-btn--md { padding: .85em 1.4em; font-size: .875rem; }
.tn-btn--sm { padding: .55em 1em; font-size: .75rem; }
.tn-btn--lg { padding: 1.05em 1.9em; font-size: 1.0625rem; }
.tn-btn:hover { background: var(--riso-red); color: var(--paper-pure); border-color: var(--riso-red); }
.tn-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink-900); }
.tn-btn:focus-visible { outline: var(--border) solid var(--focus-ring); outline-offset: 3px; }

.tn-btn--outline { --_bg: transparent; --_fg: var(--text); --_bd: var(--line-strong); box-shadow: none; }
.tn-btn--outline:hover { background: var(--text); color: var(--bg); border-color: var(--text); }

.tn-btn--accent { --_bg: var(--riso-red); --_fg: var(--paper-pure); --_bd: var(--riso-red); }
.tn-btn--accent:hover { background: var(--riso-red-deep); border-color: var(--riso-red-deep); color: var(--paper-pure); }

.tn-btn--ghost { --_bg: transparent; --_fg: var(--text); --_bd: transparent; box-shadow: none; padding-left: .4em; padding-right: .4em; }
.tn-btn--ghost:hover { background: transparent; color: var(--riso-red); border-color: transparent; }

.tn-btn[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; box-shadow: none; }
.tn-btn--block { display: flex; width: 100%; }

/* ---------- Tag ---------- */
.tn-tag {
  display: inline-flex; align-items: center; align-self: flex-start; flex: 0 0 auto; gap: .45em;
  font-family: var(--font-mono); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; font-size: .6875rem; line-height: 1;
  padding: .5em .85em; border-radius: var(--radius-pill);
  border: var(--border-hair) solid var(--line-strong); color: var(--text); background: transparent;
  white-space: nowrap;
}
.tn-tag--solid { background: var(--text); color: var(--bg); border-color: var(--text); }
.tn-tag--accent { background: var(--riso-red); color: var(--paper-pure); border-color: var(--riso-red); }
.tn-tag--square { border-radius: var(--radius-0); }
.tn-tag__dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.tn-tag--live .tn-tag__dot { background: var(--riso-red); animation: nothing-flicker 3.2s steps(1, end) infinite; }

/* ---------- Card ---------- */
.tn-card {
  position: relative; background: var(--surface); color: var(--text);
  border: var(--border) solid var(--line-strong); border-radius: var(--radius-0);
  padding: var(--space-6); box-shadow: var(--shadow-hard);
}
.tn-card--flat { box-shadow: none; }
.tn-card--paper { background: var(--paper-pure); color: var(--ink-900); border-color: var(--ink-900); }
.tn-card--paper .tn-card__eyebrow { color: var(--ink-500); }
.tn-card--inset { padding: var(--space-5); }
.tn-card__eyebrow {
  font-family: var(--font-mono); font-weight: 700; font-size: .6875rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim);
  margin: 0 0 var(--space-3);
}
.tn-card__title {
  font-family: var(--font-sans); font-weight: 900; letter-spacing: -.02em;
  line-height: 1.1; font-size: 1.375rem; margin: 0 0 var(--space-3);
}
.tn-card__body { font-size: .9375rem; line-height: 1.6; color: var(--text-dim); }

/* ---------- Field / Input ---------- */
.tn-field { display: flex; flex-direction: column; gap: .5em; font-family: var(--font-sans); }
.tn-field__label { font-family: var(--font-mono); font-weight: 700; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.tn-field__req { color: var(--riso-red); }
.tn-input {
  font-family: var(--font-sans); font-size: 1rem; color: var(--text);
  background: transparent; border: var(--border) solid var(--line-strong);
  border-radius: var(--radius-0); padding: .7em .85em; width: 100%; box-sizing: border-box;
  transition: border-color var(--dur) var(--ease-snap), box-shadow var(--dur) var(--ease-snap);
}
.tn-input::placeholder { color: var(--text-faint); }
.tn-input:focus { outline: none; border-color: var(--riso-red); box-shadow: 3px 3px 0 var(--riso-red); }
.tn-input:disabled { opacity: .45; cursor: not-allowed; }
textarea.tn-input { resize: vertical; min-height: 6em; line-height: 1.5; }
.tn-field__hint { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--text-faint); }
.tn-field--error .tn-input { border-color: var(--riso-red); }
.tn-field--error .tn-field__hint { color: var(--riso-red); }

/* ---------- Divider ---------- */
.tn-divider { display: flex; align-items: center; gap: var(--space-4); width: 100%; }
.tn-divider__rule { flex: 1; height: 0; border: 0; border-top: var(--border) solid var(--line-strong); }
.tn-divider--thick .tn-divider__rule { border-top-width: var(--border-slab); }
.tn-divider--hair .tn-divider__rule { border-top-width: var(--border-hair); }
.tn-divider__label {
  font-family: var(--font-mono); font-weight: 700; font-size: .6875rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim);
  flex: 0 0 auto;
}
.tn-divider--accent .tn-divider__rule { border-top-color: var(--riso-red); }
.tn-divider--accent .tn-divider__label { color: var(--riso-red); }