/* ─── SnapMind UI layer ─────────────────────────────────────────────────
   Shared tokens + component classes + interaction polish for the product
   surfaces (console, player, parent, auth, tools). Mirrors the mobile
   tokens in snapmind-fresh/theme.js; full spec in DESIGN_SYSTEM.md.

   This file is ADDITIVE: it defines new sm-* component classes and layers
   interaction states (hover / press / focus / transitions) onto the
   selectors the product pages already use. It never changes box models
   or layout of existing elements.
   ──────────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --sm-bg:        #0A0A0A;
  --sm-card:      #111111;
  --sm-card-2:    #161616;
  --sm-elevated:  #1A1A1A;
  /* Ink */
  --sm-text:      #FFFFFF;
  --sm-muted:     #888888;
  --sm-muted-dk:  #444444;
  /* Lines */
  --sm-border:    #1E1E1E;
  --sm-border-lt: #2A2A2A;
  /* Brand */
  --sm-accent:    #C4D824;
  --sm-accent-dm: #8FA01A;
  /* Status */
  --sm-ok:        #4ADE80;
  --sm-warn:      #F59E0B;
  --sm-danger:    #EF4444;
  /* Type */
  --sm-display:   'Bebas Neue', sans-serif;
  --sm-body:      'Barlow Condensed', sans-serif;
  /* Motion — fast enough to feel responsive, slow enough to register */
  --sm-fast:      120ms;
  --sm-base:      180ms;
  --sm-ease:      cubic-bezier(0.2, 0, 0, 1);
}

/* ─── BUTTONS ───────────────────────────────────────────────────────────
   .sm-btn          — secondary (default): transparent, hairline border
   .sm-btn-primary  — lime fill, black text. ONE per view.
   .sm-btn-danger   — destructive: transparent w/ red border; fills on hover
   States: hover, active (press), focus-visible, [disabled], .sm-loading  */

.sm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid var(--sm-border-lt);
  color: var(--sm-text);
  font-family: var(--sm-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; user-select: none;
  transition: border-color var(--sm-fast) var(--sm-ease),
              color var(--sm-fast) var(--sm-ease),
              background var(--sm-fast) var(--sm-ease),
              transform var(--sm-fast) var(--sm-ease);
}
.sm-btn:hover { border-color: var(--sm-accent); color: var(--sm-accent); }
.sm-btn:active { transform: translateY(1px); }

.sm-btn-primary {
  background: var(--sm-accent); border-color: var(--sm-accent); color: #0A0A0A;
}
.sm-btn-primary:hover { background: var(--sm-accent-dm); border-color: var(--sm-accent-dm); color: #0A0A0A; }

.sm-btn-danger { border-color: rgba(239,68,68,0.5); color: var(--sm-danger); }
.sm-btn-danger:hover { background: rgba(239,68,68,0.1); border-color: var(--sm-danger); color: var(--sm-danger); }

.sm-btn[disabled], .sm-btn.sm-disabled {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
.sm-btn.sm-loading { position: relative; color: transparent !important; pointer-events: none; }
.sm-btn.sm-loading::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: var(--sm-accent); animation: sm-spin 0.7s linear infinite;
}
.sm-btn-primary.sm-loading::after { color: #0A0A0A; }

/* ─── INPUTS ──────────────────────────────────────────────────────────── */
.sm-input, .sm-select, .sm-textarea {
  width: 100%; padding: 12px 14px;
  background: var(--sm-card-2);
  border: 1px solid var(--sm-border-lt);
  color: var(--sm-text);
  font-family: var(--sm-body); font-size: 15px;
  transition: border-color var(--sm-fast) var(--sm-ease);
}
.sm-input::placeholder, .sm-textarea::placeholder { color: var(--sm-muted-dk); }
.sm-input:focus, .sm-select:focus, .sm-textarea:focus {
  outline: none; border-color: var(--sm-accent);
}
.sm-input.sm-invalid { border-color: var(--sm-danger); }
.sm-field-label {
  display: block; margin-bottom: 6px;
  font-family: var(--sm-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--sm-muted);
}
.sm-field-error { margin-top: 6px; font-size: 12px; color: var(--sm-danger); }

/* ─── CARDS ─────────────────────────────────────────────────────────────
   Square. Hairline border. Interactive cards get border+lift on hover.  */
.sm-card {
  background: var(--sm-card);
  border: 1px solid var(--sm-border);
  padding: 16px;
}
.sm-card-interactive { cursor: pointer;
  transition: border-color var(--sm-base) var(--sm-ease), transform var(--sm-base) var(--sm-ease);
}
.sm-card-interactive:hover { border-color: var(--sm-border-lt); transform: translateY(-2px); }
.sm-card-interactive:active { transform: translateY(0); }
.sm-card-accent { border-left: 3px solid var(--sm-accent); }

/* ─── MODALS ──────────────────────────────────────────────────────────── */
.sm-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,10,10,0.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: sm-fade var(--sm-base) var(--sm-ease);
}
.sm-modal {
  width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto;
  background: var(--sm-elevated);
  border: 1px solid var(--sm-border-lt); border-top: 2px solid var(--sm-accent);
  padding: 24px;
  animation: sm-rise var(--sm-base) var(--sm-ease);
}
.sm-modal-title {
  font-family: var(--sm-display); font-size: 26px; letter-spacing: 0.04em;
  color: var(--sm-text); margin-bottom: 4px;
}

/* ─── EMPTY STATES ────────────────────────────────────────────────────── */
.sm-empty {
  padding: 48px 32px; text-align: center;
  border: 1px dashed var(--sm-border-lt); background: transparent;
}
.sm-empty-title {
  font-family: var(--sm-display); font-size: 24px; letter-spacing: 0.05em;
  color: var(--sm-text); margin-bottom: 6px;
}
.sm-empty-sub { font-size: 14px; color: var(--sm-muted); max-width: 360px; margin: 0 auto 18px; line-height: 1.5; }

/* ─── LOADING ─────────────────────────────────────────────────────────── */
.sm-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--sm-border-lt); border-top-color: var(--sm-accent);
  animation: sm-spin 0.7s linear infinite;
}
.sm-skeleton {
  position: relative; overflow: hidden;
  background: var(--sm-card-2); min-height: 12px;
}
.sm-skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: sm-shimmer 1.4s var(--sm-ease) infinite;
}

/* ─── NAVIGATION (tabs, section labels) ───────────────────────────────── */
.sm-tab {
  padding: 10px 16px;
  font-family: var(--sm-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sm-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--sm-fast) var(--sm-ease), border-color var(--sm-fast) var(--sm-ease);
}
.sm-tab:hover { color: var(--sm-text); }
.sm-tab.active { color: var(--sm-accent); border-bottom-color: var(--sm-accent); }
.sm-section-label {
  font-family: var(--sm-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sm-muted);
}

/* ─── INTERACTION POLISH FOR EXISTING PAGE MARKUP ──────────────────────
   Layered onto the class names the product pages already use. Transition
   + state changes only; no geometry.                                    */

.tab, .more-item, .conv-item, .qa-tile, .team-row, .notif-item, .path-card {
  transition: background var(--sm-fast) var(--sm-ease),
              border-color var(--sm-fast) var(--sm-ease),
              color var(--sm-fast) var(--sm-ease),
              transform var(--sm-fast) var(--sm-ease);
}
.tab:active, .more-item:active, .qa-tile:active, .path-card:active { transform: translateY(1px); }
.more-item:hover { background: var(--sm-elevated); }
.qa-tile:hover { border-color: var(--sm-accent); }

button, [role="button"], input[type="submit"] {
  transition: background var(--sm-fast) var(--sm-ease),
              border-color var(--sm-fast) var(--sm-ease),
              color var(--sm-fast) var(--sm-ease),
              opacity var(--sm-fast) var(--sm-ease),
              transform var(--sm-fast) var(--sm-ease);
}
button:active:not([disabled]), input[type="submit"]:active:not([disabled]) { transform: translateY(1px); }

input, select, textarea { transition: border-color var(--sm-fast) var(--sm-ease); }

/* Keyboard focus — visible, on-brand, never removed for mouse users */
:focus-visible {
  outline: 2px solid var(--sm-accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ─── KEYFRAMES ───────────────────────────────────────────────────────── */
@keyframes sm-spin { to { transform: rotate(360deg); } }
@keyframes sm-fade { from { opacity: 0; } }
@keyframes sm-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes sm-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Motion is an enhancement, never a requirement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}