/* === SHARED.CSS ===
   Claude API Platform - общие переменные, тема, reset, компоненты
   Подключается ПЕРВЫМ во всех HTML (landing, login, cabinet)
   Совместим с admin.css (те же переменные hsl)
*/

/* === CSS Variables (Dark default) === */
:root {
  --bg-primary: hsl(220, 20%, 5%);
  --bg-secondary: hsl(220, 18%, 8%);
  --bg-card: hsl(220, 16%, 10%);
  --bg-input: hsl(220, 16%, 12%);
  --text-primary: hsl(0, 0%, 92%);
  --text-secondary: hsl(0, 0%, 65%);
  --text-muted: hsl(0, 0%, 45%);
  --border: hsl(220, 12%, 16%);
  --border-hover: hsl(220, 12%, 24%);
  --color-primary: hsl(152, 69%, 45%);
  --color-primary-dim: hsla(152, 69%, 45%, 0.15);
  --color-blue: hsl(217, 91%, 60%);
  --color-blue-dim: hsla(217, 91%, 60%, 0.15);
  --color-yellow: hsl(38, 92%, 50%);
  --color-yellow-dim: hsla(38, 92%, 50%, 0.15);
  --color-red: hsl(0, 84%, 60%);
  --color-red-dim: hsla(0, 84%, 60%, 0.15);
  --color-purple: hsl(262, 65%, 65%);
  --sidebar-w: 260px;
  --radius: 6px;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* === Light Theme Override === */
html.light-theme {
  --bg-primary: hsl(220, 20%, 96%);
  --bg-secondary: hsl(220, 18%, 98%);
  --bg-card: hsl(0, 0%, 100%);
  --bg-input: hsl(220, 16%, 94%);
  --text-primary: hsl(220, 20%, 12%);
  --text-secondary: hsl(0, 0%, 40%);
  --text-muted: hsl(0, 0%, 55%);
  --border: hsl(220, 15%, 85%);
  --border-hover: hsl(220, 15%, 75%);
}

/* === Reset === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* === Skeleton Shimmer (loading state) === */
.sk-shimmer {
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.sk-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.04), transparent);
  background-size: 200% 100%;
  animation: sk-shine 1.5s infinite;
}
@keyframes sk-shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* === Toast notifications === */
.toast {
  position: fixed;
  top: 16px;
  right: 16px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  z-index: 9999;
  animation: toast-in 0.3s var(--ease-out-quart);
  max-width: 400px;
}
.toast-success { background: var(--color-primary-dim); border: 1px solid var(--color-primary); color: var(--color-primary); }
.toast-error { background: var(--color-red-dim); border: 1px solid var(--color-red); color: var(--color-red); }
.toast-info { background: var(--color-blue-dim); border: 1px solid var(--color-blue); color: var(--color-blue); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } }

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn:hover { border-color: var(--border-hover); background: var(--bg-input); }
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: hsl(220, 20%, 5%);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  filter: brightness(0.9);
}
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* === Form inputs === */
.input, .textarea, .select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  transition: border-color 0.15s;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-primary);
}
.textarea { resize: vertical; min-height: 80px; }
.label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-secondary); font-weight: 500; }

/* === Cards === */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}

/* === Badge / Chip === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}
.badge-green { background: var(--color-primary-dim); color: var(--color-primary); }
.badge-blue { background: var(--color-blue-dim); color: var(--color-blue); }
.badge-yellow { background: var(--color-yellow-dim); color: var(--color-yellow); }
.badge-red { background: var(--color-red-dim); color: var(--color-red); }
.badge-orange { background: color-mix(in oklab, #fb923c 20%, transparent); color: #fb923c; }
.badge-muted { background: color-mix(in oklab, var(--text-muted) 18%, transparent); color: var(--text-muted); }

/* === Theme toggle (inline SVG, NOT Lucide) === */
.theme-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
}
.theme-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.icon-sun { display: none; }
.icon-moon { display: inline; }
html.light-theme .icon-sun { display: inline; }
html.light-theme .icon-moon { display: none; }

/* === Responsive === */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Native dialog === */
dialog {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  max-width: 480px;
  width: 90%;
  margin: auto;
  max-height: 85vh;
  overflow-y: auto;
}
dialog.dlg-wide { max-width: 920px; }
dialog::backdrop {
  background: hsla(220, 20%, 5%, 0.7);
}