/* Fluksio brand theming for the documentation site.
 *
 * Follows the zensical custom color scheme approach
 * (https://zensical.org/docs/setup/colors/#custom-color-schemes): override the
 * Material `--md-*` CSS variables per [data-md-color-scheme]. Colors mirror the
 * design tokens in ../DESIGN.md → ../../DESIGN-GUIDELINES.md: neutral white /
 * near-black surfaces carrying one slate-blue accent, with terracotta reserved
 * for the single secondary affordance per view. The built-in `default` (light)
 * and `slate` (dark) schemes stay as the base so all of Material's derived
 * styling keeps working; only the brand-relevant variables are remapped.
 *
 * NOTE: the modern theme paints a frosted, translucent header via
 * `.md-header { backdrop-filter: blur(...); background: var(--md-default-bg-color--light) }`,
 * which is the same `bg-card/80 backdrop-blur` shell both frontends float their
 * chrome on. `--md-default-bg-color--light` therefore has to stay a
 * *translucent* alpha of the background — an opaque value stops the header
 * being see-through.
 */

/* Slate-blue brand primary, shared by both schemes.
 *
 * `#59849b` is the identity blue in the wordmark, and deliberately not used
 * here: it measures 4.04:1 against white, below WCAG AA for normal text. The
 * values below are the same ones the apps ship as `--primary`. */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #4a7189;
  --md-primary-fg-color--light: #7ba3b8;
  --md-primary-fg-color--dark:  #395767;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  /* The one secondary accent. Used for the facility lane on Getting started
   * and nowhere else, mirroring "one --brand-secondary affordance per view". */
  --fluksio-brand-secondary:    #de8f6e;

  /* Footer stays dark in both schemes (Material convention), neutral tokens. */
  --md-footer-bg-color:         #1a1a1a;
  --md-footer-bg-color--dark:   #0a0a0a;
}

/* Light: white page, near-black text (--foreground is #333232, not pure black). */
[data-md-color-scheme="default"] {
  --md-default-bg-color:           #ffffff;
  --md-default-bg-color--light:    rgba(255, 255, 255, 0.7);
  --md-default-bg-color--lighter:  rgba(255, 255, 255, 0.3);
  --md-default-bg-color--lightest: rgba(255, 255, 255, 0.12);

  --md-default-fg-color:           #333232;
  --md-default-fg-color--light:    #6b6b6b;
  --md-default-fg-color--lighter:  #9e9e9e;
  --md-default-fg-color--lightest: #e4e4e4;

  --md-accent-fg-color:            #395767;
  --md-typeset-a-color:            #4a7189;

  --md-code-bg-color:              #f2f2f2;
  --md-code-fg-color:              #333232;
}

/* Dark: near-black page, off-white text. Surfaces lift to #1a1a1a (--card) so
 * code and quoted blocks read against the #0a0a0a backdrop. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:           #0a0a0a;
  --md-default-bg-color--light:    rgba(10, 10, 10, 0.7);
  --md-default-bg-color--lighter:  rgba(10, 10, 10, 0.3);
  --md-default-bg-color--lightest: rgba(10, 10, 10, 0.12);

  --md-default-fg-color:           #f5f5f5;
  --md-default-fg-color--light:    #a3a3a3;
  --md-default-fg-color--lighter:  #6b6b6b;
  --md-default-fg-color--lightest: #2a2a2a;

  --md-accent-fg-color:            #7ba3b8;
  --md-typeset-a-color:            #7ba3b8;

  --md-code-bg-color:              #1a1a1a;
  --md-code-fg-color:              #f5f5f5;

  --fluksio-brand-secondary:       #e5a184;
}

/* The theme highlights the active sidebar entry with a
 * `--md-accent-fg-color--transparent` fill, which is still the built-in indigo
 * because only the opaque accent is remapped above. Drop the fill in both
 * schemes; the brand accent colour and the heavier weight the theme also
 * applies keep the selection visible. */
.md-nav--primary .md-nav__item .md-nav__link--active {
  background: none;
}

/* Radius follows the app's map: 16px for panels and cards, 12px for the
 * smaller inline surfaces. */
.md-typeset .admonition,
.md-typeset details,
.md-typeset pre > code,
.md-typeset .tabbed-content pre > code {
  border-radius: 16px;
}

.md-typeset code {
  border-radius: 12px;
}

/* Tables are the one place these docs go wide. Nothing may scroll the page
 * sideways, so the box scrolls instead — DESIGN-GUIDELINES.md → Responsive. */
.md-typeset .md-typeset__table {
  overflow-x: auto;
}

/* ── Audience cards ────────────────────────────────────────────────
 *
 * Used on Getting started, where the split mirrors the landing page's audience
 * switch: data science takes --primary, facility automation takes the one
 * terracotta accent. Built out of Markdown lists via attr_list + md_in_html,
 * so there is no HTML soup in the page source.
 */
.fluksio-lanes {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

@media screen and (min-width: 768px) {
  .fluksio-lanes {
    grid-template-columns: 1fr 1fr;
  }
}

.fluksio-lane {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  /* min-width:0 keeps a long line from stretching the grid track and, with it,
   * the page. */
  min-width: 0;
}

.fluksio-lane > :first-child {
  margin-top: 0;
}

.fluksio-lane > :last-child {
  margin-bottom: 0;
}

.fluksio-lane--science {
  border-color: var(--md-primary-fg-color);
}

.fluksio-lane--science h3 {
  color: var(--md-primary-fg-color);
}

.fluksio-lane--facility {
  border-color: var(--fluksio-brand-secondary);
}

.fluksio-lane--facility h3 {
  color: var(--fluksio-brand-secondary);
}

/* ── Brand mark ────────────────────────────────────────────────────
 *
 * The mark's disc is painted `--foreground`, so the light file is a dark disc
 * and disappears on the dark header. The theme renders the logo as an <img>,
 * whose src CSS cannot swap — so the image is hidden under `slate` and the
 * anchor paints the dark mark instead. Both files are the same 24×24 viewBox,
 * so the two look identical apart from that inversion.
 */
[data-md-color-scheme="slate"] .md-logo img {
  visibility: hidden;
}

[data-md-color-scheme="slate"] .md-logo {
  background: url("../assets/favicon-dark.svg") center / 1.2rem 1.2rem no-repeat;
}