/* The guide, in Artific's own colours and type.
 *
 * Hand-written from frontend/design/tokens/, one block per token file, each value carrying the
 * token it lifts. Nothing imports across trees at build time: the fonts and the logo beside this
 * file are copies, and `frontend/design/` stays reference material nothing depends on.
 *
 * This restyles zensical's default theme; it does not rebuild it. The navigation rail, the search
 * box and the admonitions keep their own structure and take these values.
 */

/* --- Fonts (frontend/design/tokens/fonts.css, self-hosted; theme.font = false in the config, so
 *     nothing is fetched from a third party) ------------------------------------------------- */

@font-face {
  font-family: 'Switzer';
  src: url('fonts/Switzer-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/Switzer-VariableItalic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* --- Colour (frontend/design/tokens/colors.css) ------------------------------------------- */

:root {
  /* Brand anchors and the Artific Blue ramp, verbatim from colors.css. */
  --artific-blue: #287ceb; /* --color-brand-blue */
  --artific-navy: #042244; /* --color-brand-navy */
  --artific-primary-50: #e8f1fd; /* --color-primary-50 */
  --artific-primary-100: #d5e6fb; /* --color-primary-100 */
  --artific-primary-200: #abccf7; /* --color-primary-200 */
  --artific-primary-500: #287deb; /* --color-primary-500 */
  --artific-primary-600: #1362c9; /* --color-primary-600 */
  --artific-primary-700: #0e4995; /* --color-primary-700 */
  --artific-gray-50: #f9fafb; /* --color-gray-50 */
  --artific-gray-100: #f3f4f6; /* --color-gray-100 */
  --artific-gray-200: #e5e7eb; /* --color-gray-200 */
  --artific-gray-500: #6a7282; /* --color-gray-500 */
  --artific-gray-700: #364153; /* --color-gray-700 — --text-body */

  /* Light only: this guide has one look (frontend/design/RULES.md). */
  color-scheme: only light;
}

/* The theme's own primary/accent hooks, pointed at the brand ramp. */
[data-md-color-scheme='default'] {
  --md-primary-fg-color: var(--artific-blue);
  --md-primary-fg-color--light: var(--artific-primary-400, #5296ef);
  --md-primary-fg-color--dark: var(--artific-primary-700);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: var(--artific-primary-600);
  --md-accent-fg-color--transparent: var(--artific-primary-50);

  --md-typeset-color: var(--artific-gray-700); /* --text-body */
  --md-typeset-a-color: var(--artific-primary-600);
  --md-default-bg-color: #ffffff; /* --surface-page */
  --md-code-bg-color: var(--artific-gray-50);
  --md-footer-bg-color: var(--artific-navy);
  --md-footer-bg-color--dark: var(--artific-primary-900, #051933);
}

/* --- Type (frontend/design/tokens/typography.css, product ladder) --------------------------- */

:root {
  --md-text-font: 'Switzer', ui-sans-serif, system-ui, sans-serif; /* --font-body */
  --md-code-font: 'Geist Mono', ui-monospace, 'SF Mono', monospace; /* --font-mono */
}

/* The product UI's heading ladder -- 22/20/18/16/14/12 -- not the communication ladder: this is a
 * dense reference site, not a landing page. Headings are Switzer (--font-heading-product). */
.md-typeset h1 {
  font-size: 1.375rem; /* 22px */
  font-weight: 700;
  line-height: 1.3;
  color: var(--artific-navy); /* --text-heading */
}
.md-typeset h2 {
  font-size: 1.25rem; /* 20px */
  font-weight: 600;
  line-height: 1.3;
  color: var(--artific-navy);
}
.md-typeset h3 {
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  color: var(--artific-navy);
}
.md-typeset h4 {
  font-size: 1rem; /* 16px */
  font-weight: 600;
  color: var(--artific-navy);
}
.md-typeset h5 {
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
}
.md-typeset h6 {
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
}
.md-typeset {
  font-size: 0.875rem;
  line-height: 1.6; /* --text-body-lh */
}

/* --- Shape (frontend/design/tokens/shape.css) ---------------------------------------------- */

:root {
  --artific-radius-sm: 0.625rem; /* --radius-sm */
  --artific-radius-md: 1rem; /* --radius-md */
  --artific-radius-lg: 1.25rem; /* --radius-lg */
}

.md-typeset pre > code,
.md-typeset .highlight > pre,
.md-typeset .admonition,
.md-typeset details,
.md-typeset table:not([class]) {
  border-radius: var(--artific-radius-md);
}

.md-typeset .admonition,
.md-typeset details {
  box-shadow: 0 1px 2px -1px rgb(17 24 39 / 0.06), 0 2px 6px -1px rgb(17 24 39 / 0.05); /* --shadow-sm */
  border-color: var(--artific-gray-200);
}

.md-search__form,
.md-search__output {
  border-radius: var(--artific-radius-md);
}

.md-typeset table:not([class]) {
  border: 1px solid var(--artific-gray-200);
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background-color: var(--artific-gray-50); /* --surface-section, quiet variant */
  color: var(--artific-navy);
}

/* --- Focus (frontend/design/tokens/shape.css, --focus-outline) ------------------------------ */

.md-typeset a:focus-visible,
.md-header__button:focus-visible,
.md-nav__link:focus-visible {
  outline: 2px solid var(--artific-primary-500);
  outline-offset: 2px;
}

/* The lockup in the header is a wide SVG; the theme sizes a square logo by default. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: auto;
}