/*
 * blackrim/cobalt — MkDocs Material stylesheet override
 * Source: docs/design/design-tokens.md
 *
 * Token canonical values live in docs/design/design-tokens.md.
 * Update that file first, then propagate changes here.
 */

/* ─── Font loading ─────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

/* ─── Design tokens — light mode (default scheme) ──────────────────────── */

:root,
[data-md-color-scheme="default"] {
  /* Brand */
  --brand-primary:       #2563EB;
  --brand-primary-hover: #1D4ED8;
  --brand-accent:        #F59E0B;
  --brand-deep:          #0A0A14;

  /* Neutrals */
  --surface:          #FFFFFF;
  --surface-muted:    #F8FAFC;
  --surface-elevated: #FFFFFF;
  --border:           #E2E8F0;
  --text:             #0F172A;
  --text-muted:       #475569;
  --text-subtle:      #94A3B8;

  /* Semantic */
  --success: #10B981;
  --warning: #F59E0B;
  --error:   #EF4444;
  --info:    #0EA5E9;
  --roadmap: #A855F7;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);

  /* ── MkDocs Material variable mappings (light) ── */
  /* Material "primary: custom" needs BOTH fg (= bg of header) AND bg
   * (= text/icon contrast color over the primary). Missing bg leaves
   * header text/icons effectively invisible. */
  --md-primary-fg-color:           var(--brand-primary);
  --md-primary-fg-color--light:    var(--brand-primary);
  --md-primary-fg-color--dark:     var(--brand-primary-hover);
  --md-primary-bg-color:           #ffffff;
  --md-primary-bg-color--light:    rgba(255, 255, 255, 0.7);
  --md-accent-fg-color:            var(--brand-primary-hover);
  --md-accent-fg-color--transparent: rgba(37, 99, 235, 0.1);
  --md-accent-bg-color:            #ffffff;
  --md-accent-bg-color--light:     rgba(255, 255, 255, 0.7);
  --md-typeset-a-color:            var(--brand-primary);
  --md-typeset-mark-color:         rgba(245, 158, 11, 0.3);
  --md-default-bg-color:           var(--surface);
  --md-default-bg-color--light:    rgba(255, 255, 255, 0.6);
  --md-default-bg-color--lighter:  rgba(255, 255, 255, 0.3);
  --md-default-bg-color--lightest: rgba(255, 255, 255, 0.12);
  --md-default-fg-color:           var(--text);
  --md-default-fg-color--light:    var(--text-muted);
  --md-default-fg-color--lighter:  var(--text-subtle);
  --md-default-fg-color--lightest: rgba(15, 23, 42, 0.07);
  --md-code-bg-color:              var(--surface-muted);
  --md-code-fg-color:              var(--text);
  --md-footer-bg-color:            var(--brand-deep);
  --md-footer-bg-color--dark:      #050509;
  --md-footer-fg-color:            #ffffff;
  --md-footer-fg-color--light:     rgba(255, 255, 255, 0.7);
  --md-footer-fg-color--lighter:   rgba(255, 255, 255, 0.45);
}

/* design tokens for dark mode (slate scheme) */

[data-md-color-scheme="slate"] {
  /* Brand */
  --brand-primary:       #60A5FA;
  --brand-primary-hover: #3B82F6;
  --brand-accent:        #FBBF24;
  --brand-deep:          #0A0A14;

  /* Neutrals */
  --surface:          #0A0A14;
  --surface-muted:    #111827;
  --surface-elevated: #1F2937;
  --border:           #374151;
  --text:             #F8FAFC;
  --text-muted:       #CBD5E1;
  --text-subtle:      #94A3B8;

  /* Semantic */
  --success: #34D399;
  --warning: #FBBF24;
  --error:   #F87171;
  --info:    #38BDF8;
  --roadmap: #C084FC;

  /* Material vars (dark / slate). Same pattern as light: set fg + bg + footer. */
  --md-primary-fg-color:           var(--brand-primary);
  --md-primary-fg-color--light:    var(--brand-primary);
  --md-primary-fg-color--dark:     var(--brand-primary-hover);
  --md-primary-bg-color:           #0a0a14;
  --md-primary-bg-color--light:    rgba(10, 10, 20, 0.7);
  --md-accent-fg-color:            var(--brand-primary-hover);
  --md-accent-fg-color--transparent: rgba(96, 165, 250, 0.1);
  --md-accent-bg-color:            #0a0a14;
  --md-accent-bg-color--light:     rgba(10, 10, 20, 0.7);
  --md-typeset-a-color:            var(--brand-primary);
  --md-default-bg-color:           var(--surface);
  --md-default-bg-color--light:    rgba(10, 10, 20, 0.6);
  --md-default-bg-color--lighter:  rgba(10, 10, 20, 0.3);
  --md-default-bg-color--lightest: rgba(10, 10, 20, 0.12);
  --md-default-fg-color:           var(--text);
  --md-default-fg-color--light:    var(--text-muted);
  --md-default-fg-color--lighter:  var(--text-subtle);
  --md-default-fg-color--lightest: rgba(248, 250, 252, 0.07);
  --md-code-bg-color:              var(--surface-muted);
  --md-code-fg-color:              var(--text);
  --md-footer-bg-color:            #050509;
  --md-footer-bg-color--dark:      #000000;
  --md-footer-fg-color:            #ffffff;
  --md-footer-fg-color--light:     rgba(255, 255, 255, 0.7);
  --md-footer-fg-color--lighter:   rgba(255, 255, 255, 0.45);
}

/* ─── Base typography ────────────────────────────────────────────────────── */

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

code,
pre,
.md-typeset code,
.md-typeset pre {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
}

/* ─── Heading scale ──────────────────────────────────────────────────────── */

.md-typeset h1 {
  letter-spacing: -0.02em;
  font-weight: 800;
}

.md-typeset h2 {
  font-weight: 700;
}

.md-typeset h3,
.md-typeset h4 {
  font-weight: 600;
}

/* ─── Body readability ───────────────────────────────────────────────────── */

.md-typeset {
  line-height: 1.7;
}

/* Widen the content column slightly for comfortable long-form reading */
.md-grid {
  max-width: 1320px;
}

/* ─── Link style — use brand-primary, soften underline ──────────────────── */

.md-typeset a {
  color: var(--brand-primary);
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.md-typeset a:hover {
  color: var(--brand-primary-hover);
  text-decoration-color: currentColor;
}

/* ─── Nav header — use brand-deep as the chrome ─────────────────────────── */

.md-header {
  background-color: var(--brand-deep);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

.md-header__title {
  font-weight: 700;
}

/* ─── Code blocks ────────────────────────────────────────────────────────── */

.md-typeset pre > code {
  border-radius: var(--r-md);
}

/* ─── Cards / admonitions ────────────────────────────────────────────────── */

.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}

/* ─── Status badge utility classes ──────────────────────────────────────── */
/*
 * Used by the ✅🔬🛣️ feature matrix in README/docs.
 * Apply via attr_list: {: .badge--shipping}
 */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 0.75em;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.6;
}

.badge--shipping {
  background-color: var(--success);
}

.badge--alpha {
  background-color: var(--warning);
  color: #0F172A; /* amber needs dark text for contrast */
}

.badge--roadmap {
  background-color: var(--roadmap);
}

/* ─── Table improvements ─────────────────────────────────────────────────── */

.md-typeset table:not([class]) {
  border-collapse: collapse;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.md-typeset table:not([class]) th {
  background-color: var(--surface-muted);
  font-weight: 600;
}

/* ─── Focus ring — ensure keyboard nav is visible ───────────────────────── */

:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ─── Respect prefers-reduced-motion ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}