/* ============================================================================
   docs.cautareside.com — brand-colour overrides for MkDocs Material

   Loaded via `extra_css:` in mkdocs.yml. Material's CSS exposes its theme
   tokens as CSS custom properties (--md-*); we override the palette
   variables with the cautareside brand colours from
   packages/website/style.css:
     --primary       #1A7A7A   (deep teal — header, links, accents)
     --primary-dark  #145F5F   (hover states; stronger contrast)
     --primary-light #E6F5F5   (soft fill — section backgrounds)
     --accent        #2D6B77   (secondary accent — code highlights)

   Material's built-in `primary: teal` palette renders Material Design's
   teal (#009688) which is more saturated and visibly different from the
   cautareside brand. These overrides fix that without forking the theme
   or compiling a custom Material build.

   Scoped to data-md-color-primary="teal" so we only override when the
   palette is set to teal in mkdocs.yml — leaves Material's built-in
   palettes intact for any future theme switcher experiments.
============================================================================ */

/* Light theme (scheme=default) ----------------------------------------- */
[data-md-color-scheme="default"][data-md-color-primary="teal"] {
  --md-primary-fg-color:           #1A7A7A;
  --md-primary-fg-color--light:    #E6F5F5;
  --md-primary-fg-color--dark:     #145F5F;
  --md-primary-bg-color:           #ffffff;
  --md-primary-bg-color--light:    rgba(255, 255, 255, 0.7);

  --md-accent-fg-color:            #2D6B77;
  --md-accent-fg-color--transparent: rgba(45, 107, 119, 0.1);
  --md-accent-bg-color:            #ffffff;
  --md-accent-bg-color--light:     rgba(255, 255, 255, 0.7);

  /* Section header underlines and links — match the cautareside accent
     instead of Material's teal default. */
  --md-typeset-a-color:            #1A7A7A;
}

/* Dark theme (scheme=slate) -------------------------------------------- */
[data-md-color-scheme="slate"][data-md-color-primary="teal"] {
  /* Slate uses the primary as a soft tint on a dark background. We lift
     slightly off pure brand-teal here so the header reads as part of the
     dark scheme rather than fighting it. */
  --md-primary-fg-color:           #2D8585;   /* lighter than #1A7A7A for dark-mode contrast */
  --md-primary-fg-color--light:    #1A7A7A;
  --md-primary-fg-color--dark:     #145F5F;

  --md-accent-fg-color:            #4A9BA7;
  --md-accent-fg-color--transparent: rgba(74, 155, 167, 0.15);

  --md-typeset-a-color:            #4A9BA7;
}

/* ── Subtle improvements that aren't strictly brand-colour but pair with ─
   the new palette for a more polished feel ───────────────────────────── */

/* Header weight matches cautareside.com's marketing site (font-weight: 700
   for the brand mark). Material defaults to 400 which feels light. */
.md-header__title {
  font-weight: 600;
}

/* Code-block backgrounds in the light theme — Material's default is a
   stark white that fights the soft teal page background. Use the
   primary-light token instead so the cards feel cohesive. */
[data-md-color-scheme="default"] .md-typeset pre > code {
  background-color: #F4F8F8;
}

/* Inline code in body text — same palette but at a slightly stronger
   tint than the page background so it's still distinguishable. */
[data-md-color-scheme="default"] .md-typeset code {
  background-color: #E6F5F5;
  color:            #145F5F;
}