/* =============================================================
   Polaris Docs — brand overlay for Material for MkDocs.
   Loaded via extra_css in mkdocs.yml. Mirrors the Brain Builder
   SPA's ocean / polar palette (polar-blue → abyssal-teal current).
   ============================================================= */

/* ---- Fonts (CDN is fine for initial rollout; self-host later) ---- */
@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

/* ---- Brand tokens (from the SPA's tokens.css) ---- */
:root {
  --pl-polar-blue:   #00d2ff;
  --pl-teal:         #00f5d4;
  --pl-teal-dim:     #0bb89e;
  --pl-purple:       #7209b7;
  --pl-purple-bright:#9d4edd;

  --pl-info:    #00d2ff;
  --pl-success: #00f5d4;
  --pl-warning: #ffb020;
  --pl-danger:  #ff4d6d;

  /* The signature "current" gradient (polar-blue → abyssal-teal). */
  --pl-gradient-current: linear-gradient(90deg, #00d2ff 0%, #00f5d4 100%);
  --pl-gradient-aurora:  linear-gradient(120deg, #7209b7 0%, #00d2ff 55%, #00f5d4 100%);
}

/* =============================================================
   Dark mode (slate) — the primary experience
   ============================================================= */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:           #0a0f1e;   /* header bar background (deep ocean) */
  --md-primary-fg-color--light:    #111a2e;
  --md-primary-fg-color--dark:     #060a15;
  --md-primary-bg-color:           #eaf6ff;   /* header text/icons — light on dark */
  --md-primary-bg-color--light:    rgba(234, 246, 255, 0.7);

  --md-accent-fg-color:            var(--pl-polar-blue);
  --md-accent-fg-color--transparent: rgba(0, 210, 255, 0.15);
  --md-accent-bg-color:            #060a15;
  --md-accent-bg-color--light:     rgba(234, 246, 255, 0.7);

  /* Surfaces — ocean depths */
  --md-default-bg-color:           #070b16;
  --md-default-bg-color--light:    #0a0f1e;
  --md-default-bg-color--lighter:  #111a2e;
  --md-default-bg-color--lightest: #18233c;

  /* Text */
  --md-default-fg-color:           #eaf6ff;
  --md-default-fg-color--light:    #9fb3cc;
  --md-default-fg-color--lighter:  #6a7f9c;
  --md-default-fg-color--lightest: #3a4a63;

  /* Code */
  --md-code-bg-color:              #0a0f1e;
  --md-code-fg-color:              #eaf6ff;

  /* Links / marks */
  --md-typeset-a-color:            var(--pl-polar-blue);
  --md-typeset-mark-color:         rgba(0, 210, 255, 0.25);

  /* Footer */
  --md-footer-bg-color:            #060a15;
  --md-footer-bg-color--dark:      #04070f;
}

/* =============================================================
   Light mode (default) — secondary
   ============================================================= */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:           #0a0f1e;
  --md-primary-fg-color--light:    #111a2e;
  --md-primary-fg-color--dark:     #060a15;
  --md-primary-bg-color:           #eaf6ff;

  --md-accent-fg-color:            var(--pl-teal-dim);
  --md-accent-fg-color--transparent: rgba(0, 210, 255, 0.12);

  --md-typeset-a-color:            #0284a8;   /* darkened polar-blue for AA contrast on white */
  --md-typeset-mark-color:         rgba(0, 210, 255, 0.28);
}

/* =============================================================
   Shared brand touches
   ============================================================= */

/* Gradient headline for the H1 on every page. */
.md-typeset h1 {
  background: var(--pl-gradient-current);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Header bar hairline in the brand current. */
.md-header {
  box-shadow: 0 1px 0 rgba(0, 210, 255, 0.18);
}

/* Primary buttons ride the current gradient. */
.md-typeset .md-button--primary {
  background: var(--pl-gradient-current);
  border-color: transparent;
  color: #041018;
  font-weight: 600;
}
.md-typeset .md-button--primary:hover {
  filter: brightness(1.08);
  color: #041018;
}

/* Cards (grid cards) — subtle ocean glass. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--pl-polar-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 210, 255, 0.10);
}
.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards .md-typeset .twemoji {
  color: var(--pl-polar-blue);
}

/* Inline code — brand tint. */
[data-md-color-scheme="slate"] .md-typeset code {
  color: var(--pl-teal);
}

/* Admonition accent for notes → brand blue. */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-left-color: var(--pl-polar-blue);
}

/* Search field focus ring. */
.md-search__input:focus {
  box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.35);
}