/* Documentation Pages Styling — dark theme (matches the landing page) */

/* Story Header */
.story-header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.story-title {
  font-family: 'Space Grotesk','Inter',sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #EDEDF7;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.story-desc {
  font-size: 16px;
  color: #A6A7C2;
  line-height: 1.6;
  max-width: 800px;
}

/* Content Sections */
.content-section {
  margin-bottom: 48px;
}

.section-divider {
  font-size: 20px;
  font-weight: 700;
  color: #8B7CFF;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(124,108,255,0.28);
}

/* Specification Tables */
.table-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #0E0F1A;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.data-table thead {
  background: #15161F;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.data-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #A6A7C2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: #C3C4D6;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Specs Grid */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.spec-item {
  background: #0E0F1A;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.spec-label {
  font-size: 12px;
  color: #71728F;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.spec-value {
  font-size: 16px;
  font-weight: 700;
  color: #EDEDF7;
  font-family: 'JetBrains Mono', monospace;
}

/* Doc Cards */
.doc-card {
  background: #0E0F1A;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
}

.doc-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #8B7CFF;
  margin-bottom: 8px;
}

.doc-card-desc {
  font-size: 13px;
  color: #A6A7C2;
  line-height: 1.6;
}

/* Code Blocks */
.code-block {
  background: #0E0F1A;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}

.code-header {
  background: #15161F;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.code-label {
  font-size: 12px;
  font-weight: 600;
  color: #A6A7C2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.code-pre {
  padding: 16px;
  background: #07080F;
  color: #C3C4D6;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.code-pre::-webkit-scrollbar {
  height: 6px;
}

.code-pre::-webkit-scrollbar-track {
  background: transparent;
}

.code-pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* Copy Button */
.copy-btn {
  background: #6D5CFF;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  background: #8B7CFF;
}

.copy-btn.copied {
  background: #00CA4B;
}

/* Color Swatches */
.color-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.color-swatch {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.color-swatch:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.color-swatch-preview {
  width: 100%;
  height: 80px;
}

.color-swatch-info {
  background: #0E0F1A;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.color-swatch-name {
  font-size: 12px;
  font-weight: 600;
  color: #EDEDF7;
  margin-bottom: 4px;
}

.color-swatch-value {
  font-size: 11px;
  color: #71728F;
  font-family: 'JetBrains Mono', monospace;
}

/* Brand Tabs */
.brand-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 32px;
}

.brand-tab {
  padding: 12px 24px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: #71728F;
  cursor: pointer;
  transition: all 0.2s ease;
}

.brand-tab:hover {
  color: #A6A7C2;
}

.brand-tab.active {
  color: #8B7CFF;
  border-bottom-color: #8B7CFF;
}

/* Color Grid */
.color-grid {
  display: none;
}

.color-grid.active {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.color-family {
  margin-bottom: 40px;
}

.color-family-title {
  font-size: 16px;
  font-weight: 700;
  color: #8B7CFF;
  margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 768px) {
  .story-title { font-size: 32px; }
  .specs-grid { grid-template-columns: 1fr; }
  .color-swatches { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
  .brand-tab { padding: 12px 16px; font-size: 13px; }
}

/* ============================================================================
   Component playground — dark overrides.
   These cascade OVER each component page's inline <style> (which loads after
   this file), so !important is required. The inner .preview-area keeps its
   Light / Light Grey / Dark theme switcher — that's the demo stage.
   ============================================================================ */
.preview-container {
  background: #0E0F1A !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
.theme-btn {
  background: #15161F !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #A6A7C2 !important;
}
.theme-btn:hover { border-color: rgba(255, 255, 255, 0.28) !important; }
.theme-btn.active {
  background: #6D5CFF !important;
  border-color: #6D5CFF !important;
  color: #fff !important;
}
.control-label { color: #8B7CFF !important; }
.preview-container select,
.controls select {
  background: #15161F !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #EDEDF7 !important;
}
.properties-box {
  background: #15161F !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #A6A7C2 !important;
}
.properties-box strong { color: #EDEDF7 !important; }
.variant-stage {
  background: #07080F !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.variant-caption { color: #A6A7C2 !important; }
.showcase-row { background: #07080F !important; }
.properties-inline {
  background: #15161F !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #A6A7C2 !important;
}
/* spec/token tables redefined inline on component pages */
.data-table thead { background: #15161F !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
.data-table thead th { background: #15161F !important; }
.data-table th { color: #A6A7C2 !important; }
.data-table td { color: #C3C4D6 !important; border-bottom-color: rgba(255, 255, 255, 0.07) !important; }
.data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03) !important; }
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.05) !important; }
.token-name { background: rgba(124, 108, 255, 0.14) !important; color: #A9A0FF !important; }
/* showcase rows (style/size/state stages) */
.showcase-row { background: #07080F !important; border-color: rgba(255,255,255,0.08) !important; color: #EDEDF7 !important; }
/* Design Tokens widget (JS-generated): filter chips + scroll container */
.tf-btn { background: #15161F !important; border-color: rgba(255,255,255,0.12) !important; color: #A6A7C2 !important; }
.tf-btn.active { background: #6D5CFF !important; border-color: #6D5CFF !important; color: #fff !important; }
.tokens-scroll, .table-wrap.tokens-scroll { border-color: rgba(255,255,255,0.1) !important; }
/* Usage Guidelines: match the foundation pages' Do / Don't (green / red) */
.doc-card-title { color: #8B7CFF !important; }
.doc-card-desc { color: #A6A7C2 !important; }
.doc-card--do { background: rgba(46,230,120,0.08) !important; border-color: rgba(46,230,120,0.25) !important; }
.doc-card--do .doc-card-title { color: #4ADE80 !important; }
.doc-card--dont { background: rgba(243,39,39,0.08) !important; border-color: rgba(243,39,39,0.25) !important; }
.doc-card--dont .doc-card-title { color: #FF6B6B !important; }