/* Breqwatr Learn: maps the design system tokens (tokens.css) onto Material for MkDocs.
   Light only. Sizes are design system px values converted to rem at Material's
   base root size of 20px, so they scale with Material at wide breakpoints. */

/* Self-hosted IBM Plex, the same files as docs.breqwatr.cloud. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-regular.woff2")  format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-medium.woff2")   format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-semibold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-regular.woff2")  format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-medium.woff2")   format("woff2"); }

/* Token mapping onto Material's variables. */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--accent);
  --md-primary-fg-color--dark: var(--accent-ink);
  --md-primary-fg-color--light: var(--accent-tint);
  --md-primary-bg-color: var(--ground);
  --md-primary-bg-color--light: var(--ink-soft);

  --md-accent-fg-color: var(--accent-ink);
  --md-accent-fg-color--transparent: var(--accent-tint);
  --md-accent-bg-color: var(--ground);
  --md-accent-bg-color--light: var(--ink-soft);

  --md-default-fg-color: var(--ink);
  --md-default-fg-color--light: var(--ink-soft);
  --md-default-fg-color--lighter: var(--ink-muted);
  --md-default-fg-color--lightest: var(--line);
  --md-default-bg-color: var(--ground);

  --md-typeset-color: var(--ink-soft);
  --md-typeset-a-color: var(--accent);
  --md-typeset-mark-color: var(--accent-tint);
  --md-code-bg-color: var(--panel);
  --md-code-fg-color: var(--ink);

  --md-footer-bg-color: var(--ground);
  --md-footer-bg-color--dark: var(--ground);
  --md-footer-fg-color: var(--ink-soft);
  --md-footer-fg-color--light: var(--ink-soft);
  --md-footer-fg-color--lighter: var(--ink-soft);

  --md-text-font: var(--font-sans);
  --md-code-font: var(--font-mono);

  /* PENDING: page-subheading is not in the design system yet. Proposed value:
     22px, weight 600, -0.02em tracking, 1.2 line height. Replace with the token
     once it lands in design-systems/breqwatr. */
  --learn-page-subheading-size: 1.1rem;
  --learn-page-subheading-line-height: 1.2;
}

/* Layout: 1120px content column with 28px side padding. The grid also holds
   both 12.1rem sidebars, so it is wider than the column itself. */
.md-grid { max-width: calc(56rem + 2 * 12.1rem); }
.md-content__inner { margin-left: 1.4rem; margin-right: 1.4rem; }

/* Body: page-body 17px at 1.65. Body copy is ink-soft; headings are ink. */
body { -webkit-font-smoothing: antialiased; }
.md-typeset { font-size: 0.85rem; line-height: 1.65; }

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* page-title 32px */
.md-typeset h1 { font-size: 1.6rem; line-height: 1.12; margin: 0 0 1rem; }
/* page-subheading (PENDING, see :root) */
.md-typeset h2 {
  font-size: var(--learn-page-subheading-size);
  line-height: var(--learn-page-subheading-line-height);
  margin: 2rem 0 0.8rem;
}
/* page-heading 17px */
.md-typeset h3 { font-size: 0.85rem; line-height: 1.12; margin: 1.6rem 0 0.6rem; }

/* Tables at body size. Material shrinks them to 0.64rem by default. */
.md-typeset table:not([class]) { font-size: inherit; }

/* page-lede 19px: add { .learn-lede } to the first paragraph. */
.md-typeset .learn-lede { font-size: 0.95rem; line-height: 1.65; }

/* page-eyebrow 12.5px mono capitals with a blue rule, set by overrides/main.html. */
.md-typeset .learn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.md-typeset .learn-eyebrow::before {
  content: "";
  width: 1.2rem;
  height: var(--stroke-eyebrow);
  background: var(--accent);
}

/* Links: accent, accent-ink on hover, 0.15s colour transition. */
.md-typeset a { color: var(--accent); transition: color 0.15s; }
.md-typeset a:hover, .md-typeset a:focus { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Code: panel surface, line hairline. radius-sm inline, radius-md for blocks. */
.md-typeset code { border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-sm); }
.md-typeset pre > code { border: 0; }
.md-typeset .highlight, .md-typeset pre { border-radius: var(--radius-md); }

/* Admonitions: plain panel surface, no icons, no colour per type, no shadow.
   [class] and [dir] raise specificity above Material's per-type rules. */
.md-typeset .admonition[class],
.md-typeset details[class] {
  background-color: var(--panel);
  border: var(--stroke-hairline) solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
  font-size: 0.85rem;
}
[dir] .md-typeset .admonition[class] > .admonition-title,
[dir] .md-typeset details[class] > summary {
  background-color: transparent;
  color: var(--ink);
  font-weight: 600;
  padding: 0.6rem 0.8rem 0;
  border: 0;
}
.md-typeset .admonition[class] > .admonition-title::before,
.md-typeset details[class] > summary::before { display: none; }

/* Content tabs (Windows and Linux; portal, CLI, OpenTofu). The active tab
   keeps Material's ink label and underline, matching the top tabs. */
.md-typeset .tabbed-labels > label { color: var(--ink-soft); font-weight: 500; }
.md-typeset .tabbed-labels > label:hover { color: var(--ink); }

/* Button, page scale. Copied from design-systems/breqwatr/components/bundle.css
   (.fb-btn), scoped under .md-typeset so Material's link colours don't win. */
.md-typeset a.fb-btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  border: var(--stroke-hairline) solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.md-typeset a.fb-btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent); }
.md-typeset a.fb-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.md-typeset a.fb-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.md-typeset a.fb-btn--ghost:hover { background: var(--panel); border-color: var(--line); color: var(--ink); }

/* Button row: at most one primary and one ghost, 14px apart, primary first.
   Add { .learn-actions } to the paragraph holding the buttons. */
.md-typeset .learn-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.2rem 0 1.6rem; }

/* Header: nav-bg with a backdrop blur and a line hairline, no shadow. */
.md-header,
.md-header--shadow {
  background-color: var(--nav-bg);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--stroke-hairline) solid var(--line);
  box-shadow: none;
  color: var(--ink);
}
.md-header__title { color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.md-header__button { color: var(--ink); }

.md-header__button.md-logo {
  padding: 0 0.35rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.md-header__button.md-logo .md-logo-img { height: 28px; width: auto; display: block; }

/* Search: panel surface. */
.md-search__form { background-color: var(--panel); border: var(--stroke-hairline) solid var(--line); box-shadow: none; }
.md-search__form:hover { background-color: var(--ground); }
.md-search__input { color: var(--ink); }
.md-search__input::placeholder { color: var(--ink-soft); }
.md-search__icon { color: var(--ink-soft); }

/* Tabs: one per part. */
.md-tabs { background-color: var(--ground); color: var(--ink); border-bottom: var(--stroke-hairline) solid var(--line); }
.md-tabs__link { color: var(--ink-soft); opacity: 1; }
.md-tabs__link:hover, .md-tabs__item--active .md-tabs__link { color: var(--ink); }

/* Sidebar nav. */
.md-nav__link--active, .md-nav__item .md-nav__link--active { color: var(--accent); }
.md-nav__link:hover { color: var(--accent-ink); }

/* Hide the repeated site title above the desktop sidebar nav; the header has it. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__title { display: none; }
}

/* Footer, including the previous and next links. */
.md-footer { background-color: var(--ground); color: var(--ink-soft); border-top: var(--stroke-hairline) solid var(--line); }
.md-footer__link { color: var(--ink-soft); }
.md-footer__link:hover { color: var(--accent); }
.md-footer__title { color: var(--ink); }
.md-footer-meta { background-color: var(--ground); }
.md-footer-meta__inner, .md-copyright { color: var(--ink-soft); }