/* =============================================================================
   ArcaMira documentation theme
   Brand reference: docs/Branding_Arcamira.md — "a navigator with an undercurrent
   of precision." Teal + Syne/Inter. This layer elevates stock Material:
   strong headings, a hero landing, grid cards, refined nav/code/tables/buttons.
     - Syne 700/800 : brand wordmark + headings (loaded in overrides/main.html)
     - Inter        : all body text (loaded by Material via theme.font.text)
   ============================================================================= */

:root {
  /* Light-mode primary — deepened teal for WCAG AA contrast */
  --md-primary-fg-color:        #14808c;
  --md-primary-fg-color--light: #28c8da;
  --md-primary-fg-color--dark:  #0f6670;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color:              #14808c;
  --md-accent-fg-color--transparent: rgba(20, 128, 140, 0.1);

  /* Brand tokens */
  --arca-teal:        #14808c;
  --arca-teal-deep:   #0f6670;
  --arca-teal-bright: #28c8da;
  --arca-ink:         #10161d;   /* strong heading ink (light mode) */
  --arca-ink-soft:    #47555f;
  --arca-hairline:    rgba(16, 22, 29, 0.09);
}

[data-md-color-scheme="default"] {
  --md-typeset-a-color: #14808c;
}

/* Dark mode — brighter teal on the dark "slate" scheme */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:  #28c8da;
  --md-accent-fg-color:   #28c8da;
  --md-typeset-a-color:   #28c8da;

  /* ArcaMira ink background, matching the brochure */
  --md-default-bg-color:        #11141a;
  --md-default-bg-color--light:  #181b21;
  --md-code-bg-color:           #1a1e26;

  --arca-ink:      #eef2f5;
  --arca-ink-soft: #aeb9c2;
  --arca-hairline: rgba(255, 255, 255, 0.10);
}

/* ---------- Typography & headings ------------------------------------------ */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__topic > .md-ellipsis,
.md-nav__title {
  font-family: "Syne", "Inter", system-ui, sans-serif;
  letter-spacing: -0.015em;
  font-weight: 700;
}

/* Fix Material's washed-out grey headings → strong brand ink */
.md-typeset h1 {
  color: var(--arca-ink);
  font-weight: 800;
  letter-spacing: -0.028em;
  font-size: 2.1rem;
  line-height: 1.12;
  margin-bottom: 0.7em;
}
.md-typeset h2 {
  color: var(--arca-ink);
  font-size: 1.5rem;
  margin-top: 2.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--arca-hairline);
}
.md-typeset h3 {
  color: var(--arca-ink);
  font-size: 1.18rem;
  margin-top: 1.9rem;
}
.md-typeset h4 { color: var(--arca-ink); }

.md-typeset { font-size: 0.82rem; }
.md-typeset p,
.md-typeset li { line-height: 1.72; }

/* Header wordmark in Syne */
.md-header__title { font-family: "Syne", "Inter", sans-serif; font-weight: 700; }
.md-header { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }

/* Links: no underline until hover, brand teal */
.md-typeset a { text-decoration: none; transition: color 0.12s ease; }
.md-typeset a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

/* ---------- Left navigation ------------------------------------------------ */
.md-nav__title { color: var(--arca-ink-soft); }
.md-nav__item--section > .md-nav__link {
  color: var(--arca-ink-soft);
  font-family: "Syne", "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.md-nav__link--active,
.md-nav__link--active > .md-ellipsis {
  color: var(--md-primary-fg-color) !important;
  font-weight: 600;
}

/* ---------- Buttons -------------------------------------------------------- */
.md-typeset .md-button {
  border-radius: 9px;
  font-weight: 600;
  border-width: 1px;
  padding: 0.5em 1.15em;
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.md-typeset .md-button:not(.md-button--primary) {
  color: var(--md-primary-fg-color);
  border-color: currentColor;
}
.md-typeset .md-button--primary {
  background: var(--arca-teal);
  border-color: var(--arca-teal);
  color: #ffffff;
}
.md-typeset .md-button--primary:hover {
  background: var(--arca-teal-deep);
  border-color: var(--arca-teal-deep);
  color: #ffffff;
  transform: translateY(-1px);
}
[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
  background: var(--arca-teal-bright);
  border-color: var(--arca-teal-bright);
  color: #08181b;
}
[data-md-color-scheme="slate"] .md-typeset .md-button--primary:hover {
  background: #5fdbe8;
  border-color: #5fdbe8;
  color: #08181b;
}

/* ---------- Hero (home landing) ------------------------------------------- */
.arca-hero {
  margin: 0 0 2.6rem;
  padding: 3rem 2.4rem 2.7rem;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(40, 200, 218, 0.25);
  background:
    radial-gradient(130% 150% at 88% -25%, rgba(40, 200, 218, 0.22), transparent 55%),
    linear-gradient(155deg, #0f6670 0%, #0b3a41 58%, #0a2529 100%);
}
/* faint structural grid, echoing the marketing site */
.arca-hero::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 80% -10%, #000, transparent 62%);
          mask-image: radial-gradient(120% 90% at 80% -10%, #000, transparent 62%);
}
.arca-hero > * { position: relative; }
.md-typeset .arca-hero h1 {
  color: #ffffff;
  font-size: 2.7rem;
  line-height: 1.05;
  margin: 0 0 0.35em;
}
.md-typeset .arca-hero p {
  color: rgba(235, 248, 249, 0.86);
  font-size: 1.06rem;
  max-width: 62ch;
  margin: 0 0 1.4rem;
}
/* higher specificity than Material's `.md-typeset .md-button:not(...)` so the
   ghost button stays white on the dark hero */
.md-typeset .arca-hero .md-button {
  margin: 0.2rem 0.6rem 0 0;
}
.md-typeset .arca-hero .md-button:not(.md-button--primary) {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}
.md-typeset .arca-hero .md-button:not(.md-button--primary):hover {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.md-typeset .arca-hero .md-button--primary {
  background: var(--arca-teal-bright);
  border-color: var(--arca-teal-bright);
  color: #08181b;
}
.md-typeset .arca-hero .md-button--primary:hover { background: #5fdbe8; border-color: #5fdbe8; color: #08181b; }

/* ---------- Grid cards ----------------------------------------------------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--arca-hairline);
  border-radius: 14px;
  padding: 1.1rem 1.25rem 1.2rem;
  background: var(--md-default-bg-color);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--arca-teal);
  box-shadow: 0 10px 30px rgba(20, 128, 140, 0.12);
  transform: translateY(-3px);
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li {
  background: var(--md-default-bg-color--light);
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
/* card icon in teal */
.md-typeset .grid.cards .twemoji {
  color: var(--arca-teal);
  height: 1.55rem; width: 1.55rem;
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards .twemoji { color: var(--arca-teal-bright); }
.md-typeset .grid.cards > ul > li > hr {
  margin: 0.6rem 0 0.8rem;
  border-color: var(--arca-hairline);
}
.md-typeset .grid.cards strong { font-family: "Syne", "Inter", sans-serif; font-size: 1.02rem; }

/* ---------- Admonitions, code, tables ------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;
  border-left-width: 3px;
  font-size: 0.78rem;
}
.md-typeset pre > code { border-radius: 10px; }
.md-typeset .highlight > pre { border-radius: 10px; }

.md-typeset table:not([class]) {
  border: 1px solid var(--arca-hairline);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background: color-mix(in srgb, var(--arca-teal) 8%, transparent);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  color: var(--arca-ink);
}

/* ---------- Footer / misc -------------------------------------------------- */
.md-footer-meta { background: #0a1116; }
.md-typeset hr { border-bottom-color: var(--arca-hairline); }
.md-typeset .grid.cards { margin-top: 0.8rem; }