/* ─── Paros Brand Fonts ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* ─── Paros Brand Colours ────────────────────────────────────────────── */
:root {
  --paros-navy:  #0a1628;
  --paros-cream: #e8ecdf;
  --paros-green: #737351;
  --paros-steel: #59737c;
  --paros-navy-mid: #0f2040;
  --paros-navy-light: #162d4a;
}

/* ─── Light scheme overrides ─────────────────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-default-bg-color:            #f4f5f1;
  --md-default-fg-color:            var(--paros-navy);
  --md-default-fg-color--light:     rgba(10, 22, 40, 0.72);
  --md-default-fg-color--lighter:   rgba(10, 22, 40, 0.48);
  --md-default-fg-color--lightest:  rgba(10, 22, 40, 0.1);
  --md-primary-fg-color:            var(--paros-navy);
  --md-primary-bg-color:            var(--paros-cream);
  --md-accent-fg-color:             var(--paros-steel);
  --md-typeset-a-color:             var(--paros-steel);
  --md-code-bg-color:               rgba(10, 22, 40, 0.06);
  --md-footer-bg-color:             var(--paros-navy);
  --md-footer-fg-color:             rgba(232, 236, 223, 0.55);

  /* Paros specific theme-aware variables */
  --paros-heading-color:            var(--paros-navy);
  --paros-heading-sub-color:        rgba(10, 22, 40, 0.65);
  --paros-border-color:             rgba(10, 22, 40, 0.2);
  --paros-sidebar-bg:               #f4f5f1;
  --paros-nav-link-color:           rgba(10, 22, 40, 0.65);
  --paros-nav-link-active:          var(--paros-navy);
}

/* ─── Dark scheme overrides ──────────────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:            var(--paros-navy);
  --md-default-fg-color:            var(--paros-cream);
  --md-default-fg-color--light:     rgba(232, 236, 223, 0.72);
  --md-default-fg-color--lighter:   rgba(232, 236, 223, 0.48);
  --md-default-fg-color--lightest:  rgba(232, 236, 223, 0.12);
  --md-primary-fg-color:            var(--paros-navy);
  --md-primary-bg-color:            var(--paros-cream);
  --md-accent-fg-color:             var(--paros-steel);
  --md-typeset-a-color:             var(--paros-steel);
  --md-code-bg-color:               var(--paros-navy-mid);
  --md-code-fg-color:               var(--paros-cream);
  --md-footer-bg-color:             var(--paros-navy-mid);
  --md-footer-fg-color:             rgba(232, 236, 223, 0.55);

  /* Paros specific theme-aware variables */
  --paros-heading-color:            var(--paros-cream);
  --paros-heading-sub-color:        rgba(232, 236, 223, 0.75);
  --paros-border-color:             rgba(115, 115, 81, 0.35);
  --paros-sidebar-bg:               var(--paros-navy);
  --paros-nav-link-color:           rgba(232, 236, 223, 0.65);
  --paros-nav-link-active:          var(--paros-cream);
}

/* ─── Global typography ──────────────────────────────────────────────── */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.md-typeset {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.75;
}

/* ─── Headings ───────────────────────────────────────────────────────── */
.md-typeset h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--paros-heading-color);
  margin-bottom: 1em;
}

.md-typeset h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--paros-heading-color);
  border-bottom: 1px solid var(--paros-border-color);
  padding-bottom: 0.25em;
}

.md-typeset h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--paros-heading-color);
}

.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.72em;
  color: var(--paros-steel);
}

/* ─── Header ─────────────────────────────────────────────────────────── */
.md-header {
  background-color: var(--paros-navy);
  border-bottom: 1px solid rgba(115, 115, 81, 0.35);
  box-shadow: none;
}

/* Remove logo icon */
.md-header__button.md-logo {
  display: none;
}

/* Site name — styled like paros.xyz header */
.md-header__topic:first-child .md-ellipsis {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paros-cream);
  font-size: 0.8rem;
}

.md-header__topic + .md-header__topic .md-ellipsis {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(232, 236, 223, 0.65);
  font-size: 0.8rem;
}

/* ─── Navigation tabs ────────────────────────────────────────────────── */
.md-tabs {
  background-color: var(--paros-navy-mid);
  border-bottom: 1px solid rgba(115, 115, 81, 0.2);
}

.md-tabs__link {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  text-transform: uppercase;
  opacity: 0.65;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
  color: var(--paros-cream);
}

/* ─── Sidebar ────────────────────────────────────────────────────────── */
.md-sidebar {
  background-color: var(--paros-sidebar-bg);
}

.md-nav__title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.65rem;
  color: var(--paros-steel);
}

.md-nav__link {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.78rem;
  color: var(--paros-nav-link-color);
}

.md-nav__link:hover,
.md-nav__link--active {
  color: var(--paros-nav-link-active);
}

.md-nav__link--active {
  font-weight: 400;
}

/* ─── Search ─────────────────────────────────────────────────────────── */
.md-search__form {
  background-color: var(--paros-navy-mid);
  border: 1px solid rgba(115, 115, 81, 0.3);
  border-radius: 4px;
}

.md-search__input {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  color: var(--paros-cream);
}

/* ─── Tables ─────────────────────────────────────────────────────────── */
.md-typeset table:not([class]) {
  font-size: 0.8rem;
  border: 1px solid rgba(115, 115, 81, 0.25);
}

.md-typeset table:not([class]) th {
  background-color: var(--paros-navy-mid);
  color: var(--paros-cream);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.68rem;
  border-bottom: 1px solid var(--paros-green);
}

.md-typeset table:not([class]) td {
  border-color: rgba(115, 115, 81, 0.15);
}

.md-typeset table:not([class]) tr:hover td {
  background-color: rgba(115, 115, 81, 0.07);
}

/* ─── Admonitions / callouts ─────────────────────────────────────────── */
.md-typeset .admonition {
  border-color: var(--paros-steel);
  background-color: rgba(89, 115, 124, 0.08);
}

.md-typeset .admonition-title {
  background-color: rgba(89, 115, 124, 0.15);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
.md-footer {
  background-color: var(--paros-navy-mid);
  border-top: 1px solid rgba(115, 115, 81, 0.2);
}

.md-footer-meta {
  background-color: var(--paros-navy);
}

.md-footer__link {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
}

/* ─── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--paros-navy); }
::-webkit-scrollbar-thumb { background: var(--paros-green); border-radius: 3px; }

/* ─── Landing Page Cards ─────────────────────────────────────────────── */
.md-typeset .grid.cards > li {
  border: 1px solid var(--paros-border-color);
  background-color: var(--md-code-bg-color);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.md-typeset .grid.cards > li:hover {
  transform: translateY(-2px);
  border-color: var(--paros-steel);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.md-typeset .grid.cards > li hr {
  margin-top: 0.5em;
  margin-bottom: 0.8em;
  opacity: 0.3;
}

.md-typeset .grid.cards > li p {
  font-size: 0.75rem;
  line-height: 1.5;
  margin-bottom: 1em;
}

.md-typeset .grid.cards .material-book-open-variant,
.md-typeset .grid.cards .material-shield-check,
.md-typeset .grid.cards .material-map-marker-path {
  color: var(--paros-steel);
  font-size: 1.4rem;
}