/* condash docs — vcoeur palette + typography
 * Mirrors vcoeur.com/static/css/input.css (@theme block + [data-theme="dark"]).
 */

@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/cormorant-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

/* Light mode — the `&[data-md-color-scheme="default"]` pair guards against
 * slate mode picking up the light values (Material keeps primary="custom" set
 * in both schemes, so a bare `[data-md-color-primary="custom"]` selector
 * would bleed into dark mode).
 */
[data-md-color-scheme="default"][data-md-color-primary="custom"] {
  --md-default-bg-color: #FAF6F8;
  --md-default-bg-color--light: rgba(250, 246, 248, 0.7);
  --md-default-fg-color: #1A1418;
  --md-default-fg-color--light: #665C64;
  --md-default-fg-color--lighter: #9A9095;
  --md-default-fg-color--lightest: rgba(26, 20, 24, 0.07);
  --md-typeset-color: #1A1418;
  --md-primary-fg-color: #672167;
  --md-primary-fg-color--light: #8A3A8A;
  --md-primary-fg-color--dark: #4E1850;
  --md-primary-bg-color: #FAF6F8;
  --md-primary-bg-color--light: rgba(250, 246, 248, 0.7);
  --md-accent-fg-color: #E04E88;
  --md-accent-fg-color--transparent: rgba(224, 78, 136, 0.1);
  --md-accent-bg-color: #FAF6F8;
  --md-accent-bg-color--light: rgba(250, 246, 248, 0.7);
  --md-code-bg-color: #F0EAF0;
  --md-code-fg-color: #1A1418;
  --md-typeset-a-color: #672167;
}

/* Dark mode */
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-default-bg-color: #100E12;
  --md-default-bg-color--light: rgba(16, 14, 18, 0.7);
  --md-default-fg-color: #E8E2E6;
  --md-default-fg-color--light: #ACA5AA;
  --md-default-fg-color--lighter: #918C90;
  --md-default-fg-color--lightest: rgba(232, 226, 230, 0.07);
  --md-typeset-color: #E8E2E6;
  --md-primary-fg-color: #B98BD0;
  --md-primary-fg-color--light: #CFA6E0;
  --md-primary-fg-color--dark: #8A5AA3;
  --md-primary-bg-color: #100E12;
  --md-primary-bg-color--light: rgba(16, 14, 18, 0.7);
  --md-accent-fg-color: #E882AE;
  --md-accent-fg-color--transparent: rgba(232, 130, 174, 0.1);
  --md-accent-bg-color: #100E12;
  --md-accent-bg-color--light: rgba(16, 14, 18, 0.7);
  --md-code-bg-color: #252228;
  --md-code-fg-color: #E8E2E6;
  --md-typeset-a-color: #B98BD0;
}

/* Fonts */
:root {
  --md-text-font: "Plus Jakarta Sans", sans-serif;
  --md-code-font: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* Serif headings via Cormorant */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Cormorant", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
}
.md-typeset h1 {
  font-size: 3rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
  font-weight: 500;
}
.md-typeset h2 {
  font-size: 1.9rem;
  margin-top: 2.5rem;
}
.md-typeset h3 {
  font-size: 1.4rem;
}

/* Editorial tagline — Cormorant italic, echoes vcoeur.com hero copy */
.md-typeset p.tagline {
  font-family: "Cormorant", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--md-primary-fg-color);
  margin-top: 0.25rem;
  margin-bottom: 1.75rem;
}

/* Body typography — match vcoeur.com (16px, 1.7 line-height, grayscale AA).
 * 0.8rem is 16px with Material's 125% html base. */
.md-typeset {
  font-size: 0.8rem;
  line-height: 1.7;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}