/* Paros API documentation theme.
 *
 * Source of truth: paros-ami/src/app/globals.css (graphite canvas, terracotta brand).
 * This file only loads on the api-docs.paros.xyz build, so the tiered docs sites keep
 * their navy/cream palette. It sits after extra.css and overrides it.
 */

/* ---------- Light: white canvas, near-black text, terracotta accent ---------- */
[data-md-color-scheme="default"] {
  --md-default-bg-color:            #ffffff;
  --md-default-fg-color:            #252525;
  --md-default-fg-color--light:     rgba(37, 37, 37, 0.72);
  --md-default-fg-color--lighter:   rgba(37, 37, 37, 0.45);
  --md-default-fg-color--lightest:  rgba(37, 37, 37, 0.07);

  --md-primary-fg-color:            #030213;
  --md-primary-fg-color--light:     #1b1a2b;
  --md-primary-fg-color--dark:      #000000;
  --md-primary-bg-color:            #ffffff;

  --md-accent-fg-color:             #ad5934;
  --md-typeset-a-color:             #ad5934;

  --md-code-bg-color:               #f3f4f6;
  --md-code-fg-color:               #111827;

  --md-footer-bg-color:             #030213;
  --md-footer-fg-color:             rgba(255, 255, 255, 0.72);

  /* local tokens reused below */
  --api-surface:                    #ffffff;
  --api-surface-secondary:          #f9fafb;
  --api-surface-tertiary:           #f3f4f6;
  --api-text:                       #252525;
  --api-text-secondary:             #374151;
  --api-text-muted:                 #6b7280;
  --api-border:                     #e5e7eb;
  --api-border-strong:              #d1d5db;
  --api-brand:                      #ad5934;
  --api-brand-dark:                 #963f1e;
  --api-brand-tint:                 #fdf3ee;
  --api-brand-border:               #e8c9b8;
}

/* ---------- Dark: graphite canvas, soft white text, lightened terracotta ---------- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:            #0f1115;
  --md-default-fg-color:            #edf1f5;
  --md-default-fg-color--light:     rgba(237, 241, 245, 0.72);
  --md-default-fg-color--lighter:   rgba(237, 241, 245, 0.45);
  --md-default-fg-color--lightest:  rgba(237, 241, 245, 0.08);

  --md-primary-fg-color:            #171a20;
  --md-primary-fg-color--light:     #20242c;
  --md-primary-fg-color--dark:      #0b0d11;
  --md-primary-bg-color:            #edf1f5;

  --md-accent-fg-color:             #bd7350;
  --md-typeset-a-color:             #bd7350;

  --md-code-bg-color:               #171a20;
  --md-code-fg-color:               #edf1f5;

  --md-footer-bg-color:             #171a20;
  --md-footer-fg-color:             rgba(237, 241, 245, 0.55);

  --api-surface:                    #171a20;
  --api-surface-secondary:          #20242c;
  --api-surface-tertiary:           #2a303a;
  --api-text:                       #edf1f5;
  --api-text-secondary:             #c8d0da;
  --api-text-muted:                 #9da6b2;
  --api-border:                     #303640;
  --api-border-strong:              #3a4250;
  --api-brand:                      #bd7350;
  --api-brand-dark:                 #d08a68;
  --api-brand-tint:                 rgba(189, 115, 80, 0.12);
  --api-brand-border:               rgba(189, 115, 80, 0.38);
}

/* ---------- Chrome ---------- */
.md-header,
.md-tabs {
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

.md-header__title,
.md-header__topic {
  color: var(--md-primary-bg-color);
}

.md-search__form {
  background-color: color-mix(in srgb, var(--md-primary-bg-color) 12%, transparent);
}

/* ---------- Sidebar and links ---------- */
.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--api-brand);
}

.md-nav__item .md-nav__link--active {
  font-weight: 600;
}

/* ---------- Room for diagrams ----------
 * The API pages are read next to a live diagram. Widen the reading column and let the
 * content area take the space the right-hand ToC used to occupy (the ToC is integrated
 * into the left navigation via `toc.integrate`).
 */
.md-grid {
  max-width: 100%;
}

@media screen and (min-width: 76.25em) {
  .md-content {
    max-width: none;
  }

  .md-main__inner {
    margin-top: 0.6rem;
  }
}

/* Diagram frames: full width of the content column, never letterboxed by prose width */
.md-content iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  background: var(--api-surface-tertiary);
  border: 1px solid var(--api-border);
  border-radius: 6px;
}

/* ---------- Tables and code ---------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--api-border);
  border-radius: 6px;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: var(--api-surface-secondary);
  color: var(--api-text);
  border-bottom: 1px solid var(--api-border-strong);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--api-border);
}

.md-typeset pre > code {
  border-radius: 6px;
}

/* ---------- Admonitions in the brand accent ---------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 6px;
  border-width: 1px;
  border-color: var(--api-border);
  background-color: var(--api-surface-secondary);
  box-shadow: none;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: transparent;
  border-left: 3px solid var(--api-brand);
}

.md-typeset .warning > .admonition-title,
.md-typeset .danger > .admonition-title {
  border-left-color: #d4183d;
}

/* ---------- Footer ---------- */
.md-footer-meta {
  background-color: var(--md-footer-bg-color);
}