/* =================================================================
   Carbon Connect Docs - Brand-Matched Theme
   Primary: Emerald #059669 | Font: Inter | Dark: Carbon-tinted
   ================================================================= */

/* ── Google Fonts (fallback if CDN blocked) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Serif+Pro:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── CSS Custom Properties: Light Mode ── */
:root {
  /* Brand Emerald */
  --cc-emerald-50:  #ecfdf5;
  --cc-emerald-100: #d1fae5;
  --cc-emerald-200: #a7f3d0;
  --cc-emerald-300: #6ee7b7;
  --cc-emerald-400: #34d399;
  --cc-emerald-500: #10b981;
  --cc-emerald-600: #059669;
  --cc-emerald-700: #047857;
  --cc-emerald-800: #065f46;
  --cc-emerald-900: #064e3b;
  --cc-emerald-950: #022c22;

  /* Carbon Scope Colors */
  --cc-scope1: #f59e0b;   /* Amber - Direct emissions */
  --cc-scope2: #0ea5e9;   /* Sky blue - Indirect energy */
  --cc-scope3: #8b5cf6;   /* Violet - Value chain */
  --cc-offset: #14b8a6;   /* Teal - Carbon offsets */
  --cc-netzero: #84cc16;  /* Lime - Net-zero targets */

  /* MkDocs Material overrides */
  --md-primary-fg-color:        #059669;
  --md-primary-fg-color--light: #34d399;
  --md-primary-fg-color--dark:  #047857;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: #ecfdf5;

  --md-accent-fg-color:         #059669;
  --md-accent-fg-color--transparent: rgba(5, 150, 105, 0.1);
  --md-accent-bg-color:         #ecfdf5;

  --md-typeset-a-color:         #059669;

  /* Header */
  --md-primary-fg-color:        #059669;

  /* Code blocks */
  --md-code-bg-color:           #f8fafc;
  --md-code-fg-color:           #1e293b;
  --md-code-hl-color:           rgba(5, 150, 105, 0.12);
}

/* ── Dark Mode ── */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #34d399;
  --md-primary-fg-color--light: #6ee7b7;
  --md-primary-fg-color--dark:  #10b981;

  --md-accent-fg-color:         #34d399;
  --md-accent-fg-color--transparent: rgba(52, 211, 153, 0.1);

  --md-default-bg-color:        #0f1a14;
  --md-default-fg-color:        #e2e8f0;
  --md-default-fg-color--light: #94a3b8;

  --md-typeset-a-color:         #34d399;

  --md-code-bg-color:           #1a2e23;
  --md-code-fg-color:           #e2e8f0;
  --md-code-hl-color:           rgba(52, 211, 153, 0.15);

  --md-footer-bg-color:         #0a1410;
  --md-footer-bg-color--dark:   #060e0a;
}

/* ── Header Bar ── */
.md-header {
  background: linear-gradient(135deg, #059669 0%, #047857 50%, #064e3b 100%);
  box-shadow: 0 2px 12px rgba(5, 150, 105, 0.3);
}

[data-md-color-scheme="slate"] .md-header {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #065f46 100%);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.md-header__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Navigation Tabs ── */
.md-tabs {
  background: #047857;
}

[data-md-color-scheme="slate"] .md-tabs {
  background: #064e3b;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}

/* ── Typography ── */
.md-typeset {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #1e293b;
}

[data-md-color-scheme="slate"] .md-typeset {
  color: #e2e8f0;
}

.md-typeset h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: #064e3b;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

[data-md-color-scheme="slate"] .md-typeset h1 {
  color: #34d399;
}

.md-typeset h2 {
  font-weight: 700;
  color: #065f46;
  border-bottom: 2px solid #d1fae5;
  padding-bottom: 0.4rem;
  letter-spacing: -0.01em;
}

[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #6ee7b7;
  border-bottom-color: #064e3b;
}

.md-typeset h3 {
  font-weight: 600;
  color: #047857;
}

[data-md-color-scheme="slate"] .md-typeset h3 {
  color: #34d399;
}

.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-weight: 600;
  color: #059669;
}

[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
  color: #10b981;
}

/* ── Links ── */
.md-typeset a {
  color: #059669;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.md-typeset a:hover {
  color: #047857;
  border-bottom-color: #059669;
}

[data-md-color-scheme="slate"] .md-typeset a {
  color: #34d399;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #6ee7b7;
  border-bottom-color: #34d399;
}

/* ── Admonitions ── */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 0.625rem;
  border-left-width: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Custom "carbon" admonition */
.md-typeset .admonition.carbon,
.md-typeset details.carbon {
  border-color: #059669;
}

.md-typeset .carbon > .admonition-title,
.md-typeset .carbon > summary {
  background-color: rgba(5, 150, 105, 0.1);
}

/* Scope-colored admonitions */
.md-typeset .admonition.scope1 { border-color: var(--cc-scope1); }
.md-typeset .admonition.scope2 { border-color: var(--cc-scope2); }
.md-typeset .admonition.scope3 { border-color: var(--cc-scope3); }

/* ── Code Blocks ── */
.md-typeset code {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-size: 0.78em;
  border-radius: 4px;
  padding: 0.1em 0.4em;
  background: #ecfdf5;
  color: #065f46;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background: #1a2e23;
  color: #6ee7b7;
}

.md-typeset pre > code {
  border-radius: 0.625rem;
  padding: 1rem 1.2rem;
}

.highlight .hll {
  background: rgba(5, 150, 105, 0.12);
}

/* ── Tables ── */
.md-typeset table:not([class]) {
  border-radius: 0.625rem;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.md-typeset table:not([class]) th {
  background: #059669;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: #064e3b;
}

.md-typeset table:not([class]) tr:nth-child(even) td {
  background: #f0fdf4;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:nth-child(even) td {
  background: rgba(5, 150, 105, 0.05);
}

/* ── Sidebar / Navigation ── */
.md-nav__link--active {
  color: #059669 !important;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #34d399 !important;
}

/* ── Search ── */
.md-search__input {
  border-radius: 0.5rem;
}

.md-search-result__meta {
  color: #059669;
}

/* ── Footer ── */
.md-footer {
  background: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
}

.md-footer-meta {
  background: #022c22;
}

/* ── Cards / Feature Grid ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.card {
  background: #ffffff;
  border: 1px solid #d1fae5;
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.card:hover {
  border-color: #059669;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.12);
  transform: translateY(-2px);
}

[data-md-color-scheme="slate"] .card {
  background: rgba(5, 150, 105, 0.05);
  border-color: #064e3b;
}

[data-md-color-scheme="slate"] .card:hover {
  border-color: #34d399;
  box-shadow: 0 8px 24px rgba(52, 211, 153, 0.15);
}

.card h3 {
  margin-top: 0 !important;
  font-size: 1.1rem;
}

.card p {
  color: #64748b;
  font-size: 0.85rem;
}

[data-md-color-scheme="slate"] .card p {
  color: #94a3b8;
}

/* ── Stat Badges ── */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.85rem;
}

.stat-badge.emerald {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.stat-badge.amber {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.stat-badge.sky {
  background: #f0f9ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

.stat-badge.violet {
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #c4b5fd;
}

[data-md-color-scheme="slate"] .stat-badge.emerald {
  background: rgba(5, 150, 105, 0.15);
  border-color: #064e3b;
}

[data-md-color-scheme="slate"] .stat-badge.amber {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
}

[data-md-color-scheme="slate"] .stat-badge.sky {
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.3);
}

[data-md-color-scheme="slate"] .stat-badge.violet {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
}

/* ── Scope Color Indicators ── */
.scope-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.scope-indicator.scope1 {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

.scope-indicator.scope2 {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
}

.scope-indicator.scope3 {
  background: rgba(139, 92, 246, 0.12);
  color: #6d28d9;
}

/* ── Hero Section (Homepage) ── */
.hero {
  text-align: center;
  padding: 3rem 1rem;
  margin: -1rem -1rem 2rem;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%);
  border-radius: 0 0 2rem 2rem;
}

[data-md-color-scheme="slate"] .hero {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #065f46 100%);
}

.hero h1 {
  font-size: 2.5rem;
  color: #064e3b;
  margin-bottom: 0.5rem;
  border: none !important;
}

[data-md-color-scheme="slate"] .hero h1 {
  color: #34d399;
}

.hero .tagline {
  font-size: 1.15rem;
  color: #047857;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

[data-md-color-scheme="slate"] .hero .tagline {
  color: #6ee7b7;
}

/* ── Mermaid Diagrams ── */
.mermaid {
  background: transparent !important;
}

/* ── Progress / Status Indicators ── */
.status-complete {
  color: #059669;
  font-weight: 600;
}

.status-partial {
  color: #d97706;
  font-weight: 600;
}

.status-planned {
  color: #6366f1;
  font-weight: 600;
}

/* ── Responsive Adjustments ── */
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .stat-row {
    flex-direction: column;
  }

  .hero h1 {
    font-size: 1.8rem;
  }
}

/* ── Print Styles ── */
@media print {
  .md-header,
  .md-tabs,
  .md-footer,
  .md-sidebar {
    display: none !important;
  }

  .md-content {
    margin: 0 !important;
    padding: 0 !important;
  }
}