/* Material loads the text and code faces itself (mkdocs.yml); the display
 * face for headings is not a theme option, so it is imported here. The
 * documentation site is public and online, so a CDN is fine — unlike the
 * app, which self-hosts because its container may have no internet. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap");

/* ==========================================================================
 * Alfred docs theme — oxblood on parchment.
 *
 * Every colour here was measured rather than chosen by eye, and the numbers
 * are the reason the file reads this way rather than "navy-ish". All clear
 * 4.5:1:
 *
 *            header text on primary   link on page   accent on page
 *   light             9.25:1             8.25:1          6.81:1
 *   dark             17.76:1             9.50:1          8.05:1
 *
 * These match src/app/globals.css: the app and the documentation are one
 * brand, and a visitor who clicks through should not feel the seam.
 * ========================================================================== */

:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #7a2e35;
  --md-primary-fg-color--light: #93383f;
  --md-primary-fg-color--dark: #5e2329;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #eccfd1;

  --md-accent-fg-color: #a2333f;
  --md-accent-fg-color--transparent: rgb(162 51 63 / 0.1);

  /* A touch darker than the accent: link text is small and sits on white. */
  --md-typeset-a-color: #8a2f38;

  --md-footer-bg-color: #5e2329;
  --md-footer-bg-color--dark: #431a1e;

  --al-surface: #f6f3ef;
  --al-border: #e2d9cf;
  --al-dim: #6f655e;
}

[data-md-color-scheme="slate"] {
  /* Material tints its slate surfaces from this hue; 15 keeps them warm so
   * they sit with the parchment side of the brand instead of going blue. */
  --md-hue: 15;

  --md-default-bg-color: #141010;
  --md-default-fg-color: #ede6e1;
  --md-default-fg-color--light: #cfc5be;
  --md-default-fg-color--lighter: #9d928a;
  --md-default-fg-color--lightest: #473b37;

  --md-code-bg-color: #1c1715;
  --md-code-fg-color: #cfc5be;

  --md-primary-fg-color: #1c1715;
  --md-primary-fg-color--light: #7a2e35;
  --md-primary-fg-color--dark: #141010;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #cfc5be;

  --md-accent-fg-color: #e0959c;
  --md-accent-fg-color--transparent: rgb(224 149 156 / 0.1);

  --md-typeset-a-color: #e8a7ad;

  --md-footer-bg-color: #141010;
  --md-footer-bg-color--dark: #0e0b0b;

  --al-surface: #1c1715;
  --al-border: #302724;
  --al-dim: #9d928a;
}

/* ==========================================================================
 * Typography
 * ========================================================================== */

/* The display face, matching the app. Condensed, so it carries a heavier
 * weight and a larger size without shouting. */
.md-typeset h1,
.md-typeset h2 {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
}

.md-typeset h1 {
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-weight: 600;
  font-size: 1.65rem;
  line-height: 1.1;
  letter-spacing: 0;
  margin-top: 2.2em;
  padding-top: 0.6em;
  border-top: 1px solid var(--al-border);
}

.md-typeset h3 {
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* The announcement bar is chrome, not content — keep it quiet. */
.md-banner {
  background: var(--md-primary-fg-color--dark);
  font-size: 0.7rem;
}

.md-banner a,
.md-banner a:hover {
  color: var(--md-primary-bg-color--light);
  text-decoration: underline;
}

/* ==========================================================================
 * Tables — the docs lean on them heavily, so make them legible
 * ========================================================================== */

.md-typeset table:not([class]) {
  font-size: 0.74rem;
  border: 1px solid var(--al-border);
  border-radius: 8px;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background: var(--al-surface);
  font-weight: 600;
  white-space: nowrap;
}

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

/* ==========================================================================
 * Grid cards — equal height, quiet border, lift on hover
 * ========================================================================== */

.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--al-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  background: var(--al-surface);
  transition:
    border-color 150ms,
    transform 150ms;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  transform: translateY(-2px);
  box-shadow: none;
}

.md-typeset .grid.cards > ul > li > hr {
  display: none;
}

.md-typeset .grid.cards > ul > li .twemoji,
.md-typeset .grid.cards > ul > li svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: var(--md-accent-fg-color);
  vertical-align: -0.2em;
}

/* ==========================================================================
 * Code
 * ========================================================================== */

.md-typeset code {
  border-radius: 4px;
  font-size: 0.78em;
}

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

/* ==========================================================================
 * Admonitions — thinner, less shouty than the default
 * ========================================================================== */

.md-typeset .admonition,
.md-typeset details {
  border-width: 0 0 0 3px;
  border-radius: 6px;
  box-shadow: none;
  background: var(--al-surface);
  font-size: 0.74rem;
}

/* ==========================================================================
 * Demo clips
 * ========================================================================== */

.al-video {
  margin: 1.4rem 0;
  border: 1px solid var(--al-border);
  border-radius: 10px;
  overflow: hidden;
  background: #0b0f17;
  line-height: 0;
}

.al-video video {
  display: block;
  width: 100%;
  height: auto;
}

.al-video + .al-caption {
  margin-top: -0.9rem;
  margin-bottom: 1.6rem;
  font-size: 0.68rem;
  color: var(--al-dim);
  text-align: center;
  line-height: 1.5;
}