/* ================================================================
   ASAPSMS — Design Tokens
   Deep indigo-navy base, an indigo/blue accent, one typographic
   family (Sora for headings, Inter for body). Every page includes
   this file first so the product reads as one deliberate system.
   ================================================================ */

:root {
  /* ── Surfaces ─────────────────────────────────────────────── */
  --bg:        #060a12;
  --bg-2:      #0a101e;
  --bg-3:      #0d1526;
  --surface:   #0d1526;
  --surface-2: #0a101e;
  --surface-3: #131d33;

  /* ── Borders (rgba over the dark surfaces for a glass, layered feel) ── */
  --border:    rgba(255,255,255,.08);
  --border-2:  rgba(255,255,255,.13);
  --border-3:  rgba(255,255,255,.20);

  /* ── Text ─────────────────────────────────────────────────── */
  --text:      #e8eeff;
  --text-2:    rgba(232,238,255,.65);
  --text-3:    rgba(232,238,255,.40);
  --text-4:    rgba(232,238,255,.22);

  /* ── Accent: indigo/blue (primary brand color) ─────────────────── */
  --accent:      #3b7eff;
  --accent-l:    #6a9fff;
  --accent-d:    #2563eb;
  --accent-ink:  #ffffff;

  /* ── Success (secondary / confirmation states) ───────────────── */
  --success:   #10b981;
  --success-l: #34d399;
  --success-d: #059669;

  /* ── Semantic ─────────────────────────────────────────────── */
  --warning:   #f59e0b;
  --danger:    #ef4444;
  --info:      #22d3ee;

  /* ── Typography ───────────────────────────────────────────── */
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Radii ────────────────────────────────────────────────── */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-full: 999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
  --shadow-md: 0 4px 16px rgba(0,0,0,.40), 0 1px 4px rgba(0,0,0,.25);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);
  --shadow-accent: 0 6px 20px rgba(59,126,255,.25);
  --shadow-success: 0 6px 20px rgba(16,185,129,.18);

  /* ── Layout ───────────────────────────────────────────────── */
  --sidebar-w: 264px;
  --topbar-h: 72px;
  --container: 1240px;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease: cubic-bezier(.16,.84,.44,1);
  --fast: .18s;
  --med: .32s;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37,99,235,.12), transparent);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--border-3); }

a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}

/* ── Reusable primitives ─────────────────────────────────────── */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-l);
  border-left: 2px solid var(--accent);
  padding-left: 9px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 12px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { background: var(--accent-l); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

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

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

.btn-success {
  background: var(--success);
  color: #06251a;
  box-shadow: var(--shadow-success);
}
.btn-success:hover { background: var(--success-l); transform: translateY(-1px); }

.btn-danger {
  background: rgba(239,68,68,.12);
  color: var(--danger);
  border-color: rgba(239,68,68,.3);
}
.btn-danger:hover { background: rgba(239,68,68,.2); }

.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 15px 30px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
}
.badge-accent  { background: rgba(59,126,255,.14); color: var(--accent-l); }
.badge-success { background: rgba(16,185,129,.14); color: var(--success-l); }
.badge-danger  { background: rgba(239,68,68,.14); color: var(--danger); }
.badge-neutral { background: var(--surface-2); color: var(--text-2); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-4); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,126,255,.14);
}

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast-stack {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}
.toast {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
  font-size: 13.5px;
  color: var(--text);
  animation: toastIn .28s var(--ease);
}
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  /* iOS Safari auto-zooms on focus for inputs under 16px */
  .field input, .field select, .field textarea { font-size: 16px; }
}