/*
 * Scriberry brand theme for MKDocs Material.
 * Source of truth for colors: packages/ui/src/styles/globals.css
 */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* === Light scheme (default) === */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #6e2545;   /* mulberry */
  --md-primary-fg-color--light: #c44c7c;   /* mulberry-glow */
  --md-primary-fg-color--dark:  #4a1631;   /* mulberry-deep */
  --md-primary-bg-color:        #f7f0da;   /* cream-soft */
  --md-primary-bg-color--light: #f2e9d0;   /* cream */

  --md-accent-fg-color:         #b95e2e;   /* sienna */
  --md-accent-fg-color--transparent: rgba(185, 94, 46, 0.1);
  --md-accent-bg-color:         #f7f0da;
  --md-accent-bg-color--light:  #f2e9d0;

  --md-default-bg-color:        #f7f0da;   /* cream-soft */
  --md-default-bg-color--light: #ebe0c2;   /* parchment */
  --md-default-fg-color:        #1f1612;   /* ink */
  --md-default-fg-color--light: #3b2a20;   /* ink-soft */
  --md-default-fg-color--lighter: #6b5a4d; /* ink-muted */
  --md-default-fg-color--lightest: rgba(31, 22, 18, 0.07);

  --md-typeset-color:           #1f1612;
  --md-typeset-a-color:         #6e2545;
  --md-typeset-mark-color:      rgba(196, 76, 124, 0.25);

  --md-code-bg-color:           #ebe0c2;   /* parchment */
  --md-code-fg-color:           #3b2a20;

  --md-footer-bg-color:         #4a1631;   /* mulberry-deep */
  --md-footer-bg-color--dark:   #1f1612;
  --md-footer-fg-color:         #f7f0da;
  --md-footer-fg-color--light:  #f2e9d0;
  --md-footer-fg-color--lighter: rgba(247, 240, 218, 0.6);
}

/* === Dark scheme (slate) === */
[data-md-color-scheme="slate"] {
  --md-hue: 20; /* warm hue instead of default cold blue */

  --md-primary-fg-color:        #e27fa5;   /* mulberry dark mode */
  --md-primary-fg-color--light: #f0a7c2;
  --md-primary-fg-color--dark:  #c44c7c;
  /* --md-primary-bg-color = foreground of content sitting on the primary bar
     (header title, nav icons, tabs). Must contrast against the header bg
     (#150c08 below), so keep it cream — NOT page-background dark. */
  --md-primary-bg-color:        #f7f0da;   /* cream-soft */
  --md-primary-bg-color--light: rgba(247, 240, 218, 0.75);

  --md-accent-fg-color:         #d28658;   /* sienna dark mode */
  --md-accent-fg-color--transparent: rgba(210, 134, 88, 0.15);
  --md-accent-bg-color:         #1f1612;
  --md-accent-bg-color--light:  #2a1d18;

  --md-default-bg-color:        #1f1612;
  --md-default-bg-color--light: #2a1d18;
  --md-default-bg-color--lighter: #3b2a20;
  --md-default-fg-color:        #f7f0da;
  --md-default-fg-color--light: #ebe0c2;
  --md-default-fg-color--lighter: #b8a48f;
  --md-default-fg-color--lightest: rgba(247, 240, 218, 0.07);

  --md-typeset-color:           #f7f0da;
  --md-typeset-a-color:         #e27fa5;
  --md-typeset-mark-color:      rgba(226, 127, 165, 0.3);

  --md-code-bg-color:           #2a1d18;
  --md-code-fg-color:           #ebe0c2;

  --md-footer-bg-color:         #150c08;
  --md-footer-bg-color--dark:   #0c0705;
  --md-footer-fg-color:         #f7f0da;
}

/* === Typography polish === */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset h1 {
  font-weight: 700;
  color: var(--md-primary-fg-color--dark);
}

[data-md-color-scheme="slate"] .md-typeset h1 {
  color: var(--md-primary-fg-color);
}

.md-typeset code,
.md-typeset pre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.85em;
}

/* === Header polish === */
.md-header {
  background-color: var(--md-primary-fg-color--dark);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.md-tabs {
  background-color: var(--md-primary-fg-color--dark);
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  background-color: #150c08;
}

/* === Subtle UI tweaks === */
.md-typeset a {
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}

.md-typeset a:hover {
  border-bottom-color: currentColor;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
  border-left-width: 4px;
}

.md-typeset pre > code {
  border-radius: 6px;
}

.md-search__input {
  background-color: rgba(247, 240, 218, 0.15);
}

.md-search__input::placeholder {
  color: rgba(247, 240, 218, 0.7);
}

/* === Screenshots ===
   Apply with: ![alt](path.png){ .screenshot loading=lazy } */
.md-typeset img.screenshot {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em auto;
  border-radius: 10px;
  border: 1px solid rgba(31, 22, 18, 0.12);
  box-shadow:
    0 1px 2px rgba(31, 22, 18, 0.06),
    0 8px 24px rgba(31, 22, 18, 0.08);
  background-color: var(--md-default-bg-color--light);
}

[data-md-color-scheme="slate"] .md-typeset img.screenshot {
  border-color: rgba(247, 240, 218, 0.1);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.45);
}