/* PETRA brand skin for the Bedrock docs (Material for MkDocs).
 *
 * Mirrors the DaisyUI `waypoint` theme shared by web + directory
 * (resources/css/app.css in each). Deep-navy surfaces, bright-blue links,
 * cyan accent. Dark-first: the slate scheme carries the brand; the light
 * scheme keeps Material defaults but adopts the brand primary/accent.
 *
 * Token source of truth: web/resources/css/app.css. Keep these hexes in
 * sync with that file — see design/petra-design-system.md. */

:root {
  --petra-navy-100: #101a2e; /* lightest surface — cards/inputs */
  --petra-navy-200: #0e1626; /* page body */
  --petra-navy-300: #0a0f1c; /* darkest chrome — header/footer */
  --petra-content:  #dbe4f3; /* body text on navy */
  --petra-primary:  #5b93ff; /* bright blue — links */
  --petra-accent:   #22d3ee; /* cyan — active/interactive signal */
  --petra-border:   #223351; /* hairline */
}

/* ---- Dark (slate) scheme = the brand -------------------------------- */
[data-md-color-scheme="slate"] {
  --md-hue: 220;

  --md-default-bg-color:        var(--petra-navy-200);
  --md-default-bg-color--light: #16223a;
  --md-default-fg-color:        var(--petra-content);
  --md-default-fg-color--light: #b3c1da;
  --md-default-fg-color--lighter: rgba(219, 228, 243, 0.42);
  --md-default-fg-color--lightest: rgba(219, 228, 243, 0.14);

  /* Header + nav chrome sit on the darkest navy, not pure black. */
  --md-primary-fg-color:        var(--petra-navy-300);
  --md-primary-bg-color:        var(--petra-content);
  --md-primary-bg-color--light: rgba(219, 228, 243, 0.7);

  --md-accent-fg-color:         var(--petra-accent);
  --md-typeset-a-color:         var(--petra-primary);

  --md-code-bg-color:           var(--petra-navy-100);
  --md-code-fg-color:           #cdd8ee;

  --md-footer-bg-color:         var(--petra-navy-300);
  --md-footer-bg-color--dark:   #060a13;
}

/* Cards, footer, tables lift off the body with a hairline, matching the
 * DaisyUI Card primitive (bg-base-100 + border-white/10). */
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li,
[data-md-color-scheme="slate"] .md-typeset details,
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  background: var(--petra-navy-100);
  border-color: var(--petra-border);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover {
  border-color: color-mix(in oklch, var(--petra-accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--petra-accent) 30%, transparent);
}

/* Table header band reads as chrome. */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: var(--petra-navy-300);
  color: var(--petra-content);
}

/* Selection = cyan wash, the app's "active" signal. */
[data-md-color-scheme="slate"] ::selection {
  background: color-mix(in oklch, var(--petra-accent) 30%, transparent);
}

/* ---- Light scheme = brand primary/accent only ----------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #0a0f1c;
  --md-accent-fg-color:  #0891b2; /* darker cyan for contrast on white */
  --md-typeset-a-color:  #2563eb;
}

/* ---- Shared brand touches (both schemes) ---------------------------- */

/* Blockquotes + the section eyebrow pattern get the cyan spine the apps
 * use for section heads. */
.md-typeset blockquote {
  border-left-color: var(--petra-accent);
}

/* Inline code keeps a hairline so it reads as a chip, like app badges. */
.md-typeset code {
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

/* Design-system swatch chip — used in design/petra-design-system.md. */
.petra-swatch {
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 0.25rem;
  border: 1px solid var(--petra-border);
  vertical-align: -0.2rem;
  margin-right: 0.35rem;
}