/* ============================================================================
   Dokku Pro — "Tide" brand palette for Material for MkDocs.

   Mirrors docs/assets/css/tide.theme.css (the pro.dokku.com identity) so the
   documentation site matches the product. Paired with the palette entries in
   mkdocs.yml that set `primary: custom` / `accent: custom`; the colors below
   are keyed off Material's light (`default`) and dark (`slate`) schemes so the
   accent cools from coral by day to blue by night.
   ========================================================================== */

/* ---- Light scheme -------------------------------------------------------- */
[data-md-color-scheme="default"] {
  /* Masthead + primary chrome: Tide's dark-slate masthead, not the accent */
  --md-primary-fg-color:        #22303e;
  --md-primary-fg-color--light: #2c3d4e;
  --md-primary-fg-color--dark:  #1a2530;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  /* Accent: Dokku whale coral */
  --md-accent-fg-color:         #d94f3c;
  --md-accent-fg-color--transparent: rgba(236, 99, 80, 0.1);

  /* Content surface + ink */
  --md-default-bg-color:        #f7f5f2;
  --md-default-fg-color:        #1e1b17;
  --md-default-fg-color--light: #6b6459;
  --md-default-fg-color--lighter: #a89f90;

  /* Links use the coral accent for a branded read */
  --md-typeset-a-color:         #ec6350;

  /* Hairline that frames admin screenshots against the warm page */
  --dp-screenshot-border:       rgba(30, 27, 23, 0.14);

  /* Footer picks up the masthead slate */
  --md-footer-bg-color:         #22303e;
  --md-footer-bg-color--dark:   #1a2530;
}

/* ---- Dark scheme (slate) ------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #1f2124;
  --md-primary-fg-color--light: #2a2d31;
  --md-primary-fg-color--dark:  #16181d;
  --md-primary-bg-color:        #e9ebee;
  --md-primary-bg-color--light: rgba(233, 235, 238, 0.7);

  /* Accent cools to blue by night */
  --md-accent-fg-color:         #8fbcff;
  --md-accent-fg-color--transparent: rgba(108, 164, 248, 0.1);

  --md-default-bg-color:        #0f1114;
  --md-default-fg-color:        #e9ebee;
  --md-default-fg-color--light: #9aa1ad;
  --md-default-fg-color--lighter: #636b78;

  --md-typeset-a-color:         #6ca4f8;

  /* Hairline that frames admin screenshots against the dark page */
  --dp-screenshot-border:       rgba(233, 235, 238, 0.16);

  /* Card/code surfaces from the Tide dark palette */
  --md-code-bg-color:           #16181d;
  --md-footer-bg-color:         #16181d;
  --md-footer-bg-color--dark:   #0f1114;
}

/* ---- Screenshot framing --------------------------------------------------
   Admin screenshots share the docs' light/dark chrome and blur into the page.
   A hairline border plus a soft radius frames each as a distinct panel. Scoped
   to <figure> images so the logo, favicon, and inline icons are left alone. */
.md-typeset figure img {
  border: 1px solid var(--dp-screenshot-border);
  border-radius: 6px;
}