/* ============================================================
   18minds Design System
   Shared tokens and reusable components for 18minds.ai
   ============================================================
   This file defines the single source of truth for design
   tokens (colors, spacing, typography) and shared component
   classes used across all pages. It does NOT include resets,
   body styles, or page-specific layout — those belong in
   individual page stylesheets.
   ============================================================ */


/* ------------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   ------------------------------------------------------------ */

:root {
  /* Core palette */
  --bg: #07090f;
  --bg-secondary: #0d1117;
  --bg-tertiary: #161b22;
  --surface: #0d1120;
  --card: #111827;
  --card-hover: rgba(13, 17, 23, 0.95);
  --border: rgba(255,255,255,.07);
  --border-hover: rgba(255,255,255,.12);
  --border-focus: rgba(99,102,241,.5);
  --text: #f5f3ef;
  --text-secondary: #9ca3af;
  --muted: #6b7280;
  --dim: #4b5563;
  --accent: #6366f1;
  --accent2: #8b5cf6;
  --emerald: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --rose: #f43f5e;
  --blue: #3b82f6;
  --copper: #D4622B;

  /* Provider colors */
  --provider-openai: #10b981;
  --provider-anthropic: #d97706;
  --provider-google: #4285f4;
  --provider-mistral: #f97316;
  --provider-cohere: #6366f1;

  /* Layout & effects */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 40px rgba(99,102,241,0.15);
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ------------------------------------------------------------
   2. Glassmorphism Card
   ------------------------------------------------------------ */

.glass-card {
  background: rgba(13, 17, 23, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}


/* ------------------------------------------------------------
   3. Shared Buttons
   ------------------------------------------------------------ */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.ds-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ds-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.ds-btn-primary:hover {
  box-shadow: var(--shadow-md), 0 0 24px rgba(99,102,241,0.25);
  transform: translateY(-1px);
}

.ds-btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}
.ds-btn-secondary:hover {
  color: var(--text);
  border-color: var(--border-hover);
  background: rgba(255,255,255,0.03);
}

.ds-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.ds-btn-ghost:hover {
  color: var(--text);
  background: rgba(255,255,255,0.05);
}

.ds-btn-danger {
  background: rgba(239,68,68,0.12);
  color: var(--red);
  border-color: rgba(239,68,68,0.2);
}
.ds-btn-danger:hover {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.35);
}


/* ------------------------------------------------------------
   4. Provider Badges
   ------------------------------------------------------------ */

.badge-provider {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  text-transform: uppercase;
}

.badge-openai     { background: rgba(16,185,129,0.12); color: var(--provider-openai);    border: 1px solid rgba(16,185,129,0.2);  }
.badge-anthropic  { background: rgba(217,119,6,0.12);  color: var(--provider-anthropic);  border: 1px solid rgba(217,119,6,0.2);   }
.badge-google     { background: rgba(66,133,244,0.12); color: var(--provider-google);     border: 1px solid rgba(66,133,244,0.2);  }
.badge-mistral    { background: rgba(249,115,22,0.12); color: var(--provider-mistral);    border: 1px solid rgba(249,115,22,0.2);  }
.badge-cohere     { background: rgba(99,102,241,0.12); color: var(--provider-cohere);     border: 1px solid rgba(99,102,241,0.2);  }


/* ------------------------------------------------------------
   5. HTTP Method Badges
   ------------------------------------------------------------ */

.badge-method {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
  letter-spacing: 0.04em;
  border-radius: 4px;
  text-transform: uppercase;
}

.badge-get    { background: rgba(16,185,129,0.14); color: var(--emerald); }
.badge-post   { background: rgba(99,102,241,0.14); color: var(--accent);  }
.badge-put    { background: rgba(245,158,11,0.14); color: var(--amber);   }
.badge-delete { background: rgba(239,68,68,0.14);  color: var(--red);     }


/* ------------------------------------------------------------
   6. Code Blocks & Syntax Tokens
   ------------------------------------------------------------ */

.code-block {
  background: #0d1117;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
  position: relative;
  color: #e6edf3;
  -webkit-overflow-scrolling: touch;
}

/* Syntax token classes */
.tok-k { color: #ff7b72; }                        /* keyword   */
.tok-s { color: #a5d6ff; }                        /* string    */
.tok-n { color: #79c0ff; }                        /* number    */
.tok-c { color: #8b949e; font-style: italic; }    /* comment   */
.tok-f { color: #d2a8ff; }                        /* function  */
.tok-p { color: #8b949e; }                        /* punctuation */
.tok-v { color: #ffa657; }                        /* variable  */
.tok-t { color: #7ee787; }                        /* type      */
.tok-o { color: #ff7b72; }                        /* operator  */

/* Copy button overlay */
.code-copy {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  font-size: 11px;
  font-family: var(--font);
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
  opacity: 0;
}
.code-block:hover .code-copy { opacity: 1; }
.code-copy:hover { color: var(--text); background: rgba(255,255,255,0.1); }


/* ------------------------------------------------------------
   7. Code Language Tabs
   ------------------------------------------------------------ */

.code-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.code-tab {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
}
.code-tab:hover { color: var(--text-secondary); }
.code-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}


/* ------------------------------------------------------------
   8. Gradient Mesh Background
   ------------------------------------------------------------ */

.gradient-mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  overflow: hidden;
}

.gradient-mesh::before,
.gradient-mesh::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
  animation: meshFloat 20s ease-in-out infinite alternate;
}
.gradient-mesh::before {
  width: 600px;
  height: 600px;
  background: var(--accent);
  top: -10%;
  left: -5%;
}
.gradient-mesh::after {
  width: 500px;
  height: 500px;
  background: var(--accent2);
  bottom: -10%;
  right: -5%;
  animation-delay: -10s;
  animation-direction: alternate-reverse;
}

@keyframes meshFloat {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(60px, 40px) scale(1.1); }
  100% { transform: translate(-30px, 70px) scale(0.95); }
}


/* ------------------------------------------------------------
   9. Scroll Animations
   ------------------------------------------------------------ */

.animate-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for sequential reveals */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }


/* ------------------------------------------------------------
   10. Toast Notifications
   ------------------------------------------------------------ */

.ds-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.ds-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toastSlideIn 0.3s ease forwards;
}
.ds-toast.removing { animation: toastSlideOut 0.25s ease forwards; }

.ds-toast-success { border-left: 3px solid var(--emerald); }
.ds-toast-error   { border-left: 3px solid var(--red); }
.ds-toast-info    { border-left: 3px solid var(--accent); }

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}


/* ------------------------------------------------------------
   11. Bento Grid
   ------------------------------------------------------------ */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bento-grid { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------
   12. Skeleton Loading
   ------------------------------------------------------------ */

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ------------------------------------------------------------
   13. Custom Scrollbar
   ------------------------------------------------------------ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }