/* AryaOS Product Suite design kit -> Material for MkDocs.
 *
 * The kit is vendored verbatim in docs/brand/ (tokens, marks, guide). This file
 * only BRIDGES those tokens onto the variables Material actually reads; it
 * introduces no new colours or sizes of its own. If a value here is not
 * traceable to docs/brand/tokens/suite-tokens.css, it is a bug.
 *
 * Documentation is a *read* surface, so it sits on Paper (#F2EFE7). Console
 * dark is reserved for surfaces an operator drives — the Cockpit plugins — and
 * the kit is explicit that a property never mixes the two on one screen.
 */

/* Vendored from snstac/design-system at a pinned commit — see
   docs/brand/VENDORED.md. suite-primitives pulls in fonts.css and the tokens,
   so this single import is the whole kit. */
@import url("../brand/css/suite-primitives.css");

:root {
  /* Ground and ink */
  --md-default-bg-color:        var(--sns-paper);
  --md-default-bg-color--light: var(--sns-paper-2);
  --md-default-fg-color:        var(--sns-ink);
  --md-default-fg-color--light: var(--sns-slate);
  --md-default-fg-color--lighter: var(--sns-hairline);
  --md-default-fg-color--lightest: var(--sns-hairline);

  /* One accent per surface, ~5% of it. This is the AryaOS property, so Signal
     Orange. Sibling properties carry their own accent and must not appear here
     at the same time.

     TWO ROLES, KEPT APART -- the same split already applied to the Cockpit
     plugins, the operator portal and the AryaOS Imager, and the reason it is
     applied here too.

       --sns-brand      Signal Orange. Fills, rules and the mark. NEVER a label.
       --sns-interactive  Link and control text.

     The kit token --sns-accent is Signal Orange (#E4610F) for this property and
     is vendored, so it is not edited; the interactive role is introduced here
     instead and the vendored value keeps its fills-only job.

     Measured on Paper (#F2EFE7), which is what this surface actually is:

       Signal Orange  #E4610F   3.04:1   deltaE 34.6 from the nearest status
       Okabe-Ito blue #0072B2   4.51:1   deltaE 62.1 from the nearest status

     3.04:1 fails the 4.5:1 body-text floor outright -- links were legible only
     as large text -- and deltaE 34.6 is against `fault` #A32820, so orange body
     text on a documentation page reads as an error state on a page that is not
     reporting one. Both problems are the same colour doing two jobs.

     NOT #56B4E9: that is the console's interactive blue and it is correct on
     Console dark, but it measures 2.01:1 on Paper. Light and dark surfaces need
     different blues; see the slate block below. */
  --sns-brand:                  var(--sns-accent);
  --sns-interactive:            #0072b2;

  --md-primary-fg-color:        var(--sns-ink);
  --md-primary-bg-color:        var(--sns-paper);
  --md-accent-fg-color:         var(--sns-interactive);

  --md-typeset-a-color:         var(--sns-interactive);

  /* Code is machine output: mono, on the secondary paper. */
  --md-code-bg-color:           var(--sns-paper-2);
  --md-code-fg-color:           var(--sns-ink);

  /* Status colours are fixed by the kit and never borrow an accent. */
  --md-typeset-mark-color:      color-mix(in srgb, var(--sns-warn) 22%, transparent);

  --md-text-font-family:        var(--sns-font-body);
  --md-code-font-family:        var(--sns-font-mono);
}

/* mkdocs.yml offers a light/dark toggle, and Material sets its scheme variables
   on [data-md-color-scheme], which outranks the :root block above. So the dark
   scheme needs its own interactive colour or it inherits a value chosen for
   Paper and used on a dark ground.

   Measured on Material's slate ground (#1F2129):

     Okabe-Ito blue #0072B2   3.10:1   fails the 4.5:1 body-text floor
     Okabe-Ito sky  #56B4E9   6.96:1   passes

   the exact mirror of the Paper result, where the sky blue is the one that
   fails. One blue cannot serve both grounds, so each surface names its own --
   and the dark value is the same #56B4E9 the Cockpit console already uses, so
   an operator moving between docs and console sees one interactive colour. */
[data-md-color-scheme="slate"] {
  --sns-interactive:            #56b4e9;

  --md-accent-fg-color:         var(--sns-interactive);
  --md-typeset-a-color:         var(--sns-interactive);
}

/* --- Type scale from the kit -------------------------------------------- */

/* The kit specifies four type roles:
 *
 *   display   Archivo 800
 *   heading   Archivo 700
 *   body      Archivo 400, 16/1.56
 *   label     Archivo Narrow 600, uppercase, 0.18em tracking
 *   mono      JetBrains Mono 400/700
 *
 * None of that was reaching this site. suite-primitives.css sets those styles
 * on its OWN classes -- .sns-suite-frame, .sns-display, .brand-* -- and Material
 * renders none of them: its content is .md-typeset h1..h6, .md-nav__*, th, and
 * so on. So the families were inherited through the font-family declarations
 * while the weights, line-height and tracking that make the kit look like the
 * kit were simply absent.
 *
 * The clearest symptom: --sns-font-label (Archivo Narrow) was referenced
 * NOWHERE. The webfont shipped to every visitor -- about 28 KB -- and was
 * applied to nothing.
 */

body,
.md-typeset {
  font-weight: 400;
  line-height: 1.56;
}

/* h1 is the display role; h2-h4 are headings. The kit's display tracking is
   -0.03em, which is set here rather than inherited because Material has its own
   per-heading letter-spacing. */
.md-typeset h1 {
  font-family: var(--sns-font-display);
  font-weight: 800;
  letter-spacing: -0.03em;

  /* Material's own rule is `color: var(--md-default-fg-color--light)`, which
     our bridge maps to Slate, so the page title rendered MUTED -- the display
     role, at 800 weight, as the faintest text on the page. Measured on Paper:

       Slate #6B7169   4.36:1   legal for large text, fails body contrast
       Ink   #12211A  14.53:1

     Slate is legal there, but it is the kit's secondary/muted role and display
     is its strongest, so it is overridden rather than inherited.

     THE VARIABLE, NOT THE LITERAL. This first said `var(--sns-ink)`, and that
     shipped an h1 nobody could read in dark mode: ink is #12211A against
     slate's #1E2129 ground, which measures

       1.04:1

     -- dark text on a dark background, reported from the live site. The
     contrast work behind this whole stylesheet was done against Paper only,
     and a hardcoded colour cannot follow a theme that has two grounds.

     --md-default-fg-color is scheme-aware and already carries the intent:
     our :root maps it to --sns-ink for the light scheme, and Material's own
     [data-md-color-scheme="slate"] block replaces it with a light value.

       light  ink #12211A on Paper    14.53:1   (unchanged)
       dark   #BFC1C6 on #1E2129       8.94:1 */
  color: var(--md-default-fg-color);
}

.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--sns-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The label role: Archivo Narrow 600, uppercase, 0.18em.
 *
 * Applied only where the text genuinely IS a label -- a table header, a nav
 * section title, the top-level section tabs. NOT to links or body text: at
 * 0.18em tracking uppercase is a signpost, and signposting a paragraph makes it
 * unreadable. This is the first use of the Archivo Narrow face on the site. */
.md-typeset table:not([class]) th,
.md-nav__title,
.md-tabs__link {
  font-family: var(--sns-font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* Tracking that wide needs the trailing space trimmed or the last letter drifts
   away from whatever follows it. */
.md-typeset table:not([class]) th,
.md-nav__title {
  padding-right: calc(var(--sns-unit) + 0.18em);
}

/* Mono carries a 700 weight in the kit for inline code, so a command inside a
   sentence reads as machine output rather than emphasis. */
.md-typeset code {
  font-weight: 700;
}

.md-typeset pre code {
  font-weight: 400;
}

/* --- Non-negotiables from the guide ------------------------------------- */

/* radius 0 — everywhere, no exceptions. */
.md-typeset code,
.md-typeset pre,
.md-typeset table:not([class]),
.md-typeset .admonition,
.md-typeset details,
.md-typeset .highlight,
.md-typeset .tabbed-set,
.md-button,
.md-search__form,
.md-search__output,
.md-nav__link,
img {
  border-radius: var(--sns-radius) !important;
}

/* No shadows. A 2px rule does the separating. */
.md-header,
.md-tabs,
.md-typeset .admonition,
.md-typeset details,
.md-search__form,
.md-search__output,
.md-nav--primary .md-nav__title,
.md-typeset table:not([class]) {
  box-shadow: none !important;
}

.md-header {
  /* Hairline, not ink. The header's own background IS --sns-ink (set above via
     --md-primary-fg-color), so an ink rule on it was invisible in both schemes
     -- a separator that looked applied and separated nothing.
     It matters most in dark mode, where the header (#12211A) and the body
     ground (#1E2129) are both dark and nearly the same value. */
  border-bottom: var(--sns-rule) solid var(--sns-hairline);
}

.md-typeset .admonition,
.md-typeset details {
  border: var(--sns-rule) solid var(--sns-hairline);
  border-left-width: calc(var(--sns-rule) * 2);
}

.md-typeset table:not([class]) th {
  /* Scheme-aware for the same reason as the h1 colour: a literal --sns-ink rule
     is correct on Paper and invisible on slate's dark ground, so table headers
     silently lost their underline in dark mode. */
  border-bottom: var(--sns-rule) solid var(--md-default-fg-color);
}

/* Flush left everywhere — including the label inside a wide button. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  text-align: left;
}

/* 44px is the kit minimum; AryaOS operator surfaces use 48px for gloved use
   (documented deviation — see docs/brand/README.md). Docs are read, not driven,
   so the kit value applies here. */
.md-button,
.md-nav__link,
.md-tabs__link {
  min-height: var(--sns-target);
  display: inline-flex;
  align-items: center;
}

.md-button {
  border: var(--sns-rule) solid currentColor;
  justify-content: flex-start;
}

/* Mono means machine: commands, ports, frequencies, callsigns, hex, morse. */
.md-typeset code,
.md-typeset kbd,
.md-typeset pre {
  font-family: var(--sns-font-mono);
}

/* Status colours, fixed. */
.md-typeset .admonition.success,
.md-typeset .admonition.tip { border-left-color: var(--sns-ok); }
.md-typeset .admonition.warning,
.md-typeset .admonition.caution { border-left-color: var(--sns-warn); }
.md-typeset .admonition.danger,
.md-typeset .admonition.failure { border-left-color: var(--sns-fault); }

/* 8px unit / 24px gutter rhythm on the grid cards used on the landing page. */
.md-typeset .grid.cards > ul > li {
  border: var(--sns-rule) solid var(--sns-hairline);
  border-radius: var(--sns-radius);
  padding: var(--sns-gutter);
  box-shadow: none;
}