/* 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 {
  /* The two colours an organisation sets, and Artific's own as their defaults
   * (--color-brand-blue and the secondary of frontend/design/tokens/colors.css). assets/org-theme.js
   * replaces them on <html> for an organisation's look, so every shade below follows. */
  --org-primary: #287deb;
  --org-secondary: #f7ae1d;

  /* The ramp the guide uses, derived from the primary in CSS rather than carried as a copy of the
   * front's palette function: a tenth towards white and black per step, as the front's ramps are
   * mixed. With the defaults these land within a few steps of Artific Blue's ramp in colors.css. */
  --artific-blue: var(--org-primary);
  --artific-primary-50: color-mix(in oklab, var(--org-primary) 10%, white);
  --artific-primary-100: color-mix(in oklab, var(--org-primary) 20%, white);
  --artific-primary-200: color-mix(in oklab, var(--org-primary) 40%, white);
  --artific-primary-400: color-mix(in oklab, var(--org-primary) 85%, white);
  --artific-primary-500: var(--org-primary);
  --artific-primary-600: color-mix(in oklab, var(--org-primary) 85%, black);
  --artific-primary-700: color-mix(in oklab, var(--org-primary) 62%, black);
  --artific-primary-900: color-mix(in oklab, var(--org-primary) 28%, black);
  --artific-navy: color-mix(in oklab, var(--org-primary) 22%, black); /* --color-brand-navy */

  /* Neutrals (frontend/design/tokens/colors.css), the same for every organisation. */
  --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);
  --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);
  --md-typeset-mark-color: color-mix(in oklab, var(--org-secondary) 35%, white);
}

/* --- 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. An
 * organisation's logo may be any shape: scaled to fit, never stretched. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
}

/* The drawer's logo, the one a narrow screen shows: the theme's square box would make a wide logo
 * tiny, so it takes the logo's own width, with room left for the name beside it. */
.md-nav .md-nav__title[for='__drawer'] .md-logo {
  width: auto;
  max-width: 7rem;
}

/* While assets/org-theme.js waits for an organisation's look (at most 600 ms, on the first page of a
 * tab), the page is hidden so it does not show Artific's colours first. */
html.os-theme-waiting body {
  visibility: hidden;
}