/* ============================================================================
   КОМПОНЕНТЫ · theme-driven primitives (buttons / fields / badges / cards)
   All colours come from semantic tokens, so a single component works in both
   the calm and immersive themes. Requires colors_and_type.css.
   ========================================================================== */

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  --bh: var(--accent-hover); --bp: var(--accent-press);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-display); font-weight:600; font-size:14px; line-height:1;
  padding:11px 18px; border-radius: var(--radius-control); border:1px solid transparent;
  background: var(--accent); color: var(--accent-contrast); cursor:pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out); white-space:nowrap; text-decoration:none;
}
.btn:hover { background: var(--bh); }
.btn:active { background: var(--bp); transform: translateY(1px); }
.btn:focus-visible { outline:none; box-shadow: 0 0 0 3px var(--accent-ring); }

.btn--lg { font-size:15px; padding:14px 24px; }
.btn--sm { font-size:13px; padding:8px 13px; }
.btn--block { display:flex; width:100%; }

.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); --bh: var(--surface-3); --bp: var(--surface-2); }
.btn--secondary:hover { background: var(--surface-3); }

.btn--ghost { background: transparent; color: var(--text); border-color: transparent; --bh: var(--surface-3); }
.btn--ghost:hover { background: var(--surface-3); }

.btn--team { background: var(--team); color: var(--team-ink); --bh: color-mix(in srgb, var(--team) 85%, #000); --bp: color-mix(in srgb, var(--team) 72%, #000); }
.btn--team:hover { background: var(--bh); }

.btn--danger { background: var(--error); color:#fff; --bh: color-mix(in srgb, var(--error) 85%, #000); }
.btn--danger:hover { background: var(--bh); }

.btn--mission { /* immersive HUD action: clipped corner + glow */
  background: var(--accent); color: var(--accent-contrast); box-shadow: var(--glow);
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  font-family: var(--font-mono); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px;
}

/* ---- Fields --------------------------------------------------------------- */
.field { display:flex; flex-direction:column; gap:6px; }
.field > label { font-family: var(--font-text); font-size:13px; font-weight:600; color: var(--text-muted); }
.input, .select, .textarea {
  font-family: var(--font-text); font-size:14px; color: var(--text);
  background: var(--surface); border:1px solid var(--border-strong); border-radius: var(--radius-control);
  padding:10px 12px; width:100%; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.input:disabled { background: var(--surface-2); color: var(--text-faint); cursor:not-allowed; }
.field .hint { font-size:12px; color: var(--text-faint); }
.field.is-error .input { border-color: var(--error); }
.field.is-error .hint { color: var(--error); }

/* ---- Badges --------------------------------------------------------------- */
.badge {
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-text); font-weight:600;
  font-size:12px; padding:3px 9px; border-radius: var(--r-pill); white-space:nowrap;
  background: var(--surface-3); color: var(--text-muted); border:1px solid var(--border);
}
.badge .b-dot{ width:6px; height:6px; border-radius:50%; background: currentColor; }
.badge--success { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb,var(--success) 35%,transparent); }
.badge--pending { color: var(--pending); background: var(--pending-soft); border-color: color-mix(in srgb,var(--pending) 35%,transparent); }
.badge--error   { color: var(--error);   background: var(--error-soft);   border-color: color-mix(in srgb,var(--error) 35%,transparent); }
.badge--info    { color: var(--info);     background: var(--info-soft);    border-color: color-mix(in srgb,var(--info) 35%,transparent); }

/* ---- Cards ---------------------------------------------------------------- */
.card {
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-md); padding: var(--sp-6);
}
[data-theme="immersive"] .card { backdrop-filter: blur(8px); box-shadow: var(--shadow-md); }
.card--inset { background: var(--surface-2); box-shadow:none; }

/* ---- Avatar / crew token ----
   Solid palette fill + per-colour ink (chosen for WCAG AA) + a light contrast ring.
   Pass --av-bg / --av-ink per member; --av-border is themed. */
.avatar { width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:13px; line-height:1; letter-spacing:.01em; flex:none;
  background: var(--av-bg, var(--team));
  color: var(--av-ink, oklch(from var(--av-bg, var(--team)) clamp(0, (0.62 - l) * 1000, 1) 0 0));
  border:1.5px solid var(--av-border, rgba(255,255,255,.5)); }

/* ---- Tabs ----------------------------------------------------------------- */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--border); }
.tabs .tab{ font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--text-faint);
  padding:10px 14px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; border-top:none; border-left:none; border-right:none; }
.tabs .tab:hover{ color:var(--text-muted); }
.tabs .tab.is-active{ color:var(--accent); border-bottom-color:var(--accent); }
[data-theme="immersive"] .tabs .tab.is-active{ color:var(--text); border-bottom-color:var(--accent); }