/* The brand, as overrides on Material's own stylesheet - loaded by BOTH surfaces.
 *
 * Source: Figma "Design System - live rebuild" (ShAqDMVv5bnEEAKSEbllIq), collection
 * "Wilderness Theme", read 2026-08-19. Figma token names are in the comments. Mirrors
 * serve/static/theme.css - change both or neither.
 */
/* Material sets its palette on [data-md-color-scheme=...], which outranks :root. Declaring
   the brand colours there did nothing: the documentation site kept rendering white while the
   model explorer was parchment. Same selector Material uses, so these actually win. */
:root, [data-md-color-scheme="default"] {
  --md-default-bg-color:         #ffffff;   /* the page is white; parchment is for
                                              surfaces that should sit back */
  --md-default-fg-color:         #221f20;   /* content/content-base, light */
  --md-default-fg-color--light:  rgba(34, 31, 32, .6);
  --md-default-fg-color--lighter:rgba(34, 31, 32, .32);
  --md-default-fg-color--lightest:rgba(34, 31, 32, .07);
  --md-primary-fg-color:         #080707;   /* surfaces/surface-base, dark */
  --md-primary-fg-color--dark:   #000000;
  --md-primary-fg-color--light:  #141412;   /* the nav surface */
  --md-primary-bg-color:         #fffefc;   /* content/content-base, dark */
  --md-accent-fg-color:          #baa69e;   /* content/content-highlight */
  --md-typeset-a-color:          #221f20;
  --md-code-bg-color:            #f2efe9;
  --md-code-fg-color:            #221f20;
  /* brand values Material has no variable for. Here rather than in the model explorer's
     own stylesheet, so both surfaces read the same numbers. */
  --ww-line:                     #e4ded4;
  --ww-radius:                   1px;     /* border/border-radius/soft */
  --ww-shadow:                   0 1px 2px rgba(34, 31, 32, .10);
  --ww-surface:                  #faf8f5;
  /* The stacks live in docs/shared/chrome.css, loaded by both surfaces. Restating them
     here is what let the two drift apart.
     Material builds --md-text-font-family as `var(--md-text-font, _), -apple-system, ...`
     on the `:root>*` selector, which outranks a plain :root declaration - so overriding the
     composed variable here did nothing and the docs site kept Material's own stack while the
     model explorer used the brand's. Set the inner hook, and match the specificity for the
     composed one. */
  --md-text-font: "Atyp Display";
  --md-code-font: ui-monospace;
}

:root > * {
  --md-text-font-family: var(--ww-font-body);
  --md-code-font-family: var(--ww-font-mono);
}

:root[data-md-color-scheme="slate"], [data-md-color-scheme="slate"] {
  --md-default-bg-color:         #080707;
  --md-default-fg-color:         #fffefc;
  --md-default-fg-color--light:  rgba(255, 254, 252, .6);   /* content/content-subtle, dark */
  --md-default-fg-color--lighter:rgba(255, 254, 252, .32);
  --md-primary-fg-color:         #141412;
  --md-accent-fg-color:          #baa69e;
  --md-typeset-a-color:          #baa69e;
  --md-code-bg-color:            #1b1a18;
  --md-code-fg-color:            #fffefc;
  --ww-line:                     #2a2825;
  --ww-shadow:                   0 1px 2px rgba(0, 0, 0, .5);
  --ww-surface:                  #141412;
}

/* Athelas for headings, as the brand specifies for Text/Heading/* */
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-header__title, .md-nav__title {
  font-family: var(--ww-font-display);
  font-weight: 400;
  letter-spacing: 0;
}
.md-typeset h1 { color: var(--md-default-fg-color); }

/* The drawer and table-of-contents titles used to be styled here too, in rem, while the
   general .md-nav__title rule below said the same thing in px. They agreed at a 20px root
   and nowhere else: on a 1080p screen the documentation site's label was 13.64px and the
   model explorer's 12.4px. One rule now, below, in one unit. */

/* border/border-radius/soft is 1px: the brand is square. Undo Material's rounding. */
.md-typeset code, .md-typeset pre, .md-typeset table:not([class]),
.md-button, .md-typeset .admonition, .md-search__form, .md-typeset details {
  border-radius: 1px;
}

/* Generated tables carry many columns; keep them dense and let them scroll. */
.md-typeset table:not([class]) { font-size: var(--ww-type-table); display: table; }
.md-typeset table:not([class]) th { background: var(--md-code-bg-color); font-weight: 600;
                                    white-space: nowrap; }
.md-typeset table:not([class]) td { padding: .4rem .6rem; }
.md-typeset__scrollwrap { margin: 0 0 1rem; }
.md-typeset .grid.cards > ul > li { border-radius: 1px; border-color: var(--md-default-fg-color--lightest); }

/* ---- the model explorer's sidebar uses Material's own nav classes, so these rules cover
        both navigations rather than one each ------------------------------------------- */
.md-nav__title { font-family: var(--ww-font-display); font-size: var(--ww-type-navlabel);
                 line-height: 1.3; text-transform: uppercase; letter-spacing: .22em;
                 color: var(--md-accent-fg-color); font-weight: 400; padding: 0; }
.md-nav__item--section > .md-nav__label {
  /* Material renders its own section headers at font-weight 700 in
     --md-default-fg-color--light; measured, not guessed at from the screenshot. */
  display: block; margin: 1.4rem 0 .2rem; font-size: var(--ww-type-nav);
  line-height: 1.3; font-weight: 700; color: var(--md-default-fg-color--light);
}

/* Datasette underlines every link, including the ones in a navigation. Material's own reset
   does not, so without this the model explorer's menu came out underlined and the two
   navigations read differently again. */
.md-nav__link, .md-nav__link:link, .md-nav__link:visited { text-decoration: none; }
.md-nav__link:hover { text-decoration: none; color: var(--md-accent-fg-color); }
.md-header__button.md-logo img { height: 22px; width: auto; }