/* ============================================================
   The Architecture of Mathematics — Custom Theme
   Palette: Charcoal #1A1A2E + Bright Blue #4A90D9
   ============================================================ */

/* ------------------------------------------------------------
   1. Color System (CSS Custom Properties)
   ------------------------------------------------------------ */

body[data-md-color-scheme="default"] {
  --theme-primary: #1A1A2E;
  --theme-accent: #4A90D9;
  --theme-accent-bright: #5BA3E8;
  --theme-bg: #ffffff;
  --theme-text: #1a1a2e;
  --theme-border: rgba(26, 26, 46, 0.12);
  --theme-shadow: rgba(26, 26, 46, 0.08);
  --md-primary-fg-color: #1A1A2E;
  --md-accent-fg-color: #4A90D9;
}

body[data-md-color-scheme="slate"] {
  --theme-primary: #1A1A2E;
  --theme-accent: #5BA3E8;
  --theme-accent-bright: #7BB8F0;
  --theme-bg: #0F1923;
  --theme-text: #e0e0e0;
  --theme-border: rgba(255, 255, 255, 0.08);
  --theme-shadow: rgba(0, 0, 0, 0.3);
  --md-primary-fg-color: #1A1A2E;
  --md-accent-fg-color: #5BA3E8;
}

/* ------------------------------------------------------------
   2. Typography
   ------------------------------------------------------------ */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Space Grotesk", var(--md-text-font-family);
  letter-spacing: -0.02em;
  color: var(--theme-text);
}

.md-typeset h1 {
  font-size: 2.2em;
  font-weight: 800;
}

.md-typeset h2 {
  font-size: 1.6em;
  font-weight: 700;
  border-bottom: 2px solid var(--theme-accent);
  padding-bottom: 0.3em;
}

.md-typeset h3 {
  font-size: 1.25em;
  font-weight: 700;
}

.md-typeset h4 {
  font-size: 1.05em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------
   3. Custom Admonitions — Mathematics-Specific Types
   ------------------------------------------------------------ */

/* --- Theorem (Blue #4A90D9) --- */

:root {
  --md-admonition-icon--theorem: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

.md-typeset .admonition.theorem,
.md-typeset details.theorem {
  border-color: #4A90D9;
}

.md-typeset .theorem > .admonition-title,
.md-typeset .theorem > summary {
  background-color: rgba(74, 144, 217, 0.1);
}

.md-typeset .theorem > .admonition-title::before,
.md-typeset .theorem > summary::before {
  background-color: #4A90D9;
  -webkit-mask-image: var(--md-admonition-icon--theorem);
          mask-image: var(--md-admonition-icon--theorem);
}

/* --- Proof Sketch (Green #10B981) --- */

:root {
  --md-admonition-icon--proof-sketch: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z"/></svg>');
}

.md-typeset .admonition.proof-sketch,
.md-typeset details.proof-sketch {
  border-color: #10B981;
}

.md-typeset .proof-sketch > .admonition-title,
.md-typeset .proof-sketch > summary {
  background-color: rgba(16, 185, 129, 0.1);
}

.md-typeset .proof-sketch > .admonition-title::before,
.md-typeset .proof-sketch > summary::before {
  background-color: #10B981;
  -webkit-mask-image: var(--md-admonition-icon--proof-sketch);
          mask-image: var(--md-admonition-icon--proof-sketch);
}

/* --- Conjecture (Purple #8B5CF6) --- */

:root {
  --md-admonition-icon--conjecture: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>');
}

.md-typeset .admonition.conjecture,
.md-typeset details.conjecture {
  border-color: #8B5CF6;
}

.md-typeset .conjecture > .admonition-title,
.md-typeset .conjecture > summary {
  background-color: rgba(139, 92, 246, 0.1);
}

.md-typeset .conjecture > .admonition-title::before,
.md-typeset .conjecture > summary::before {
  background-color: #8B5CF6;
  -webkit-mask-image: var(--md-admonition-icon--conjecture);
          mask-image: var(--md-admonition-icon--conjecture);
}

/* --- Counterexample (Red #EF4444) --- */

:root {
  --md-admonition-icon--counterexample: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>');
}

.md-typeset .admonition.counterexample,
.md-typeset details.counterexample {
  border-color: #EF4444;
}

.md-typeset .counterexample > .admonition-title,
.md-typeset .counterexample > summary {
  background-color: rgba(239, 68, 68, 0.1);
}

.md-typeset .counterexample > .admonition-title::before,
.md-typeset .counterexample > summary::before {
  background-color: #EF4444;
  -webkit-mask-image: var(--md-admonition-icon--counterexample);
          mask-image: var(--md-admonition-icon--counterexample);
}

/* ------------------------------------------------------------
   4. Badge System
   ------------------------------------------------------------ */

.badge {
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  display: inline-block;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

/* Proof tier badges */

.badge-foundational {
  background: rgba(74, 144, 217, 0.15);
  color: #2563EB;
}

.badge-bridge {
  background: rgba(245, 158, 11, 0.15);
  color: #D97706;
}

.badge-insight {
  background: rgba(139, 92, 246, 0.15);
  color: #7C3AED;
}

/* Maturity badges */

.badge-proven {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.badge-conjectured {
  background: rgba(139, 92, 246, 0.15);
  color: #7C3AED;
}

.badge-established {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.badge-developing {
  background: rgba(79, 70, 229, 0.15);
  color: #4338CA;
}

.badge-emerging {
  background: rgba(245, 158, 11, 0.15);
  color: #D97706;
}

/* ------------------------------------------------------------
   5. Card Grid System
   ------------------------------------------------------------ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2em;
}

.card {
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  padding: 1.5em;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px var(--theme-shadow);
}

.card-icon {
  font-size: 1.8em;
  display: block;
  margin-bottom: 0.5em;
}

.card-title {
  font-family: "Space Grotesk", var(--md-text-font-family);
  font-weight: 700;
  font-size: 1.1em;
  display: block;
  margin-bottom: 0.3em;
}

.card-desc {
  font-size: 0.9em;
  opacity: 0.8;
  display: block;
  margin-bottom: 0.8em;
}

.card-meta {
  display: flex;
  gap: 0.5em;
  align-items: center;
  margin-bottom: 0.8em;
}

/* ------------------------------------------------------------
   6. Section Hero
   ------------------------------------------------------------ */

.section-hero {
  background: linear-gradient(135deg, var(--theme-primary) 0%, #243447 100%);
  color: #ffffff;
  padding: 2em;
  border-radius: 12px;
  margin-bottom: 2em;
}

.section-hero h1 {
  color: #ffffff !important;
  border: none !important;
}

/* ------------------------------------------------------------
   7. Table Styling
   ------------------------------------------------------------ */

.md-typeset table:not([class]) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--theme-shadow);
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.md-typeset table:not([class]) thead th {
  background: var(--theme-primary);
  color: #ffffff;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 0.9em 1em;
}

.md-typeset table:not([class]) tbody tr:nth-child(even) {
  background: var(--theme-border);
}

.md-typeset table:not([class]) tbody tr:hover {
  background: rgba(74, 144, 217, 0.06);
}

.md-typeset table:not([class]) td {
  padding: 0.7em 1em;
}

/* ------------------------------------------------------------
   8. Hero Landing Page
   ------------------------------------------------------------ */

.hero {
  background: linear-gradient(135deg, #1A1A2E 0%, #2D3A4E 50%, #1A1A2E 100%);
  color: #ffffff;
  padding: 4em 2em;
  text-align: center;
  border-radius: 0 0 16px 16px;
}

.hero h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 2.8em;
  font-weight: 800;
  margin-bottom: 0.2em;
  border: none !important;
  color: #ffffff !important;
}

.hero .subtitle {
  font-size: 1.2em;
  opacity: 0.7;
  margin-bottom: 0.5em;
}

.hero .edition {
  font-size: 0.85em;
  opacity: 0.5;
  display: block;
  margin-bottom: 2em;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
  max-width: 800px;
  margin: 0 auto 2em;
}

.hero-stat .number {
  font-family: "Space Grotesk", sans-serif;
  font-size: 2.2em;
  font-weight: 800;
  color: #4A90D9;
  display: block;
}

.hero-stat .label {
  font-size: 0.85em;
  opacity: 0.7;
}

.hero-cta {
  display: flex;
  gap: 1em;
  justify-content: center;
  margin-top: 2em;
}

.hero-cta a {
  padding: 0.8em 2em;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s;
}

.hero-cta a.primary {
  background: #4A90D9;
  color: #ffffff;
}

.hero-cta a.secondary {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.hero-cta a:hover {
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
  }

  .hero h1 {
    font-size: 2em;
  }

  .hero-cta {
    flex-direction: column;
    align-items: center;
  }
}

/* ------------------------------------------------------------
   9. Mermaid Diagram Theming
   ------------------------------------------------------------ */

body[data-md-color-scheme="default"] {
  --md-mermaid-node-bg-color: rgba(74, 144, 217, 0.08);
  --md-mermaid-node-fg-color: var(--theme-primary);
  --md-mermaid-edge-color: var(--theme-accent);
  --md-mermaid-label-fg-color: var(--theme-text);
  --md-mermaid-label-bg-color: var(--theme-bg);
}

body[data-md-color-scheme="slate"] {
  --md-mermaid-node-bg-color: rgba(91, 163, 232, 0.12);
  --md-mermaid-node-fg-color: var(--theme-accent);
  --md-mermaid-edge-color: var(--theme-accent-bright);
  --md-mermaid-label-fg-color: var(--theme-text);
  --md-mermaid-label-bg-color: var(--theme-bg);
}

/* ------------------------------------------------------------
   10. Print Styles
   ------------------------------------------------------------ */

@media print {
  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-footer,
  .md-search {
    display: none !important;
  }

  .md-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  h1 {
    page-break-before: always;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  table,
  .admonition,
  .mermaid,
  pre {
    page-break-inside: avoid;
  }

  .hero,
  .section-hero {
    background: none !important;
    color: #000 !important;
    padding: 1em 0 !important;
  }
}