/* Leadsheet.app brand theme for the docs site.
   Dark, branded header (near-black #0e0f13, white LS logo) over a light,
   readable content area. Palette mirrors 01-LANDING styles.css.

   NOTE: the brand variables must live inside [data-md-color-scheme="default"]
   — Material defines its scheme vars there, and that selector outranks :root. */

:root {
  --ls-bg: #0e0f13;         /* app background — used for the header */
  --ls-surface: #1a1b20;
  --ls-border: #2a2b30;
  --ls-accent: #6cf2c2;     /* mint accent (for the dark header) */
  --ls-accent-ink: #0a7a57; /* darker sibling of the mint, readable on white */
  --ls-fg: #ffffff;
}

[data-md-color-scheme="default"] {
  /* Header / tabs: brand near-black with white text & icons. */
  --md-primary-fg-color: var(--ls-bg);
  --md-primary-fg-color--light: var(--ls-surface);
  --md-primary-fg-color--dark: var(--ls-bg);
  --md-primary-bg-color: var(--ls-fg);
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  /* Accent (hover, focus, active nav, selection) in the brand green family. */
  --md-accent-fg-color: var(--ls-accent-ink);
  --md-accent-fg-color--transparent: rgba(10, 122, 87, 0.1);

  /* Links in the light content use the readable dark mint. */
  --md-typeset-a-color: var(--ls-accent-ink);
}

/* Header sits on the brand colour; hairline to set it off from the page. */
.md-header {
  border-bottom: 1px solid var(--ls-border);
}

/* Logo: keep the wordmark legible in the header. */
.md-header__button.md-logo img {
  height: 1.5rem;
  width: auto;
}