/* udoc design system — colors and type
 * --------------------------------------------------------
 * Tokens are CSS custom properties on :root and the
 * mkdocs-material color-scheme attributes. Anything built
 * against --cream-* / --stone-* / --amber-* keeps working
 * across both light and dark.
 *
 * Spelling is British where it matches the source ("colour"
 * is fine in prose; the token names use "color" for CSS).
 */

/* -----------------------------------------------------------
 * Fonts
 *
 * Söhne is the design face but is not free. Substitutes:
 *   - Display:  Inter (Google Fonts)
 *   - Body:     Inter Tight (Google Fonts)
 *   - Mono:     JetBrains Mono (Google Fonts)
 *
 * Inter Tight + JetBrains Mono are loaded by mkdocs-material
 * via the `theme.font` config. Inter (used for headings) is
 * loaded here.
 * --------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root,
[data-md-color-scheme="default"] {
  /* -------- CREAM (the page) -------- */
  --cream-0: #fbf8f1; /* coolest, used for sub-panels under the page */
  --cream-1: #f7f2e7; /* default page background */
  --cream-2: #efe7d3; /* card / terminal panel surface */
  --cream-3: #e5d9bd; /* hovered surface, deeper card */
  --cream-4: #d8c8a4; /* divider blocks, faint backgrounds */

  /* -------- STONE (type and chrome) -------- */
  --stone-0: #6b5d4a; /* meta type */
  --stone-1: #524636; /* secondary type */
  --stone-2: #3d3326; /* primary body type */
  --stone-3: #2a2218; /* headings */
  --stone-4: #1c160e; /* deepest, used for full-bleed dark blocks */
  --stone-line: #d4c5a4; /* hairline borders on cream */
  --stone-line-deep: #a89572; /* hairline on deeper cream */
  --stone-shadow: rgb(56 38 24 / 0.08); /* shadow tint */

  /* -------- AMBER (the signal) -------- */
  --amber-line: #ffdb6e; /* underlines, subtle borders */
  --amber: #ffc207; /* primary accent (sRGB 255 194 7) */
  --amber-deep: #c28f00; /* active / pressed */
  --amber-tint: rgb(255 194 7 / 0.12); /* hover wash */

  /* -------- SIGNAL (terminal output only) -------- */
  --signal-error: #a83c2c;
  --signal-warn: #b8862e;
  --signal-ok: #6b8e3d;
  --signal-info: #4a6c8a;

  color-scheme: light;

  /* -------- TYPE -------- */
  --font-display: "Inter", "Söhne", system-ui, sans-serif;
  --font-body: "Inter Tight", "Söhne", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (px) */
  --type-display: 56px;
  --type-h1: 40px;
  --type-h2: 28px;
  --type-h3: 20px;
  --type-body: 16px;
  --type-meta: 14px;
  --type-small: 12px;

  /* Line-heights */
  --lh-display: 1.05;
  --lh-h1: 1.15;
  --lh-h2: 1.25;
  --lh-h3: 1.35;
  --lh-body: 1.55;
  --lh-mono: 1.5;
  --lh-mono-dense: 1.4;

  /* Tracking */
  --track-display: -0.02em;
  --track-h1: -0.015em;
  --track-h2: -0.01em;
  --track-body: 0em;
  --track-eyebrow: 0.12em;
  --track-mono: 0em;

  /* -------- SPACING -------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* -------- RADII -------- */
  --radius-sharp: 0px;
  --radius-tag: 2px;
  --radius-input: 4px;
  --radius-round: 9999px;

  /* -------- SHADOW -------- */
  --shadow-card: 0 1px 0 0 rgb(56 38 24 / 0.04),
    0 4px 12px -4px rgb(56 38 24 / 0.08);
  --shadow-inset-terminal: inset 0 2px 0 0 rgb(56 38 24 / 0.08);

  /* -------- MEASURES -------- */
  --measure-prose: 68ch;
  --measure-narrow: 52ch;
  --width-sidebar: 280px;

  /* ----------------------------------------------------------
   * mkdocs-material variable overrides — map design tokens
   * onto the mkdocs-material chrome. Each --md-* var below
   * inherits from a design token and updates automatically
   * when the dark scheme redefines the underlying scale.
   * ---------------------------------------------------------- */

  /* Surfaces */
  --md-default-bg-color:           var(--cream-1);
  --md-default-bg-color--light:    var(--cream-0);
  --md-default-bg-color--lighter:  var(--cream-2);
  --md-default-bg-color--lightest: var(--cream-3);

  /* Foreground / type */
  --md-default-fg-color:           var(--stone-2);
  --md-default-fg-color--light:    var(--stone-1);
  --md-default-fg-color--lighter:  var(--stone-0);
  --md-default-fg-color--lightest: var(--stone-line);

  --md-typeset-color:              var(--stone-2);
  --md-typeset-a-color:            var(--stone-3);
  --md-typeset-mark-color:         var(--amber-tint);

  /* Header / banner — cream-2 surface, stone-3 ink. Subtle
     offset from the page rather than a loud amber bar. */
  --md-primary-fg-color:           var(--cream-2);
  --md-primary-fg-color--light:    var(--cream-3);
  --md-primary-fg-color--dark:     var(--stone-4);
  --md-primary-bg-color:           var(--stone-3);
  --md-primary-bg-color--light:    var(--stone-2);

  /* Accent — amber, used for active/hover/focus states. */
  --md-accent-fg-color:            var(--amber-deep);
  --md-accent-fg-color--transparent: var(--amber-tint);
  --md-accent-bg-color:            var(--cream-1);
  --md-accent-bg-color--light:     var(--cream-2);

  /* Code blocks */
  --md-code-bg-color:              var(--cream-2);
  --md-code-fg-color:              var(--stone-3);

  /* Footer — full-bleed deep ink with cream type. */
  --md-footer-bg-color:            var(--stone-4);
  --md-footer-bg-color--dark:      var(--stone-4);
  --md-footer-fg-color:            var(--cream-1);
  --md-footer-fg-color--light:     var(--cream-2);
  --md-footer-fg-color--lighter:   var(--cream-3);

  /* Font families — mkdocs-material reads these to set the
     prose and code stacks. */
  --md-text-font-family: var(--font-body);
  --md-code-font-family: var(--font-mono);
}

/* ===========================================================
 * Dark mode — mirrors the design system's dark token values.
 * mkdocs-material toggles `[data-md-color-scheme="slate"]` on
 * the body when the user picks the dark scheme.
 * =========================================================== */

[data-md-color-scheme="slate"] {
  color-scheme: dark;

  --cream-0: #15120c;
  --cream-1: #1c1810;
  --cream-2: #251f15;
  --cream-3: #2f281c;
  --cream-4: #3a3224;

  --stone-0: #847766;
  --stone-1: #a59885;
  --stone-2: #c8bca7;
  --stone-3: #ebe1ca;
  --stone-4: #f7f2e7;
  --stone-line: #3a3224;
  --stone-line-deep: #594d3a;
  --stone-shadow: rgb(0 0 0 / 0.4);

  --amber-line: #c28f00;
  --amber: #ffc207;
  --amber-deep: #ffdb6e;
  --amber-tint: rgb(255 194 7 / 0.10);

  --signal-error: #d96552;
  --signal-warn: #e0a849;
  --signal-ok: #9bb86a;
  --signal-info: #6e9bbd;

  --shadow-card: 0 1px 0 0 rgb(0 0 0 / 0.3),
    0 4px 12px -4px rgb(0 0 0 / 0.5);
  --shadow-inset-terminal: inset 0 2px 0 0 rgb(0 0 0 / 0.3);

  /* mkdocs-material's slate stylesheet sets --md-default-bg-color
     and friends directly inside [data-md-color-scheme="slate"],
     which would beat the :root mapping. Redeclare the full chrome
     binding here so the cream/stone scale stays the source of
     truth. */
  --md-default-bg-color:           var(--cream-1);
  --md-default-bg-color--light:    var(--cream-0);
  --md-default-bg-color--lighter:  var(--cream-2);
  --md-default-bg-color--lightest: var(--cream-3);

  --md-default-fg-color:           var(--stone-2);
  --md-default-fg-color--light:    var(--stone-1);
  --md-default-fg-color--lighter:  var(--stone-0);
  --md-default-fg-color--lightest: var(--stone-line);

  --md-typeset-color:              var(--stone-2);
  --md-typeset-a-color:            var(--stone-3);
  --md-typeset-mark-color:         var(--amber-tint);

  --md-primary-fg-color:           var(--cream-2);
  --md-primary-fg-color--light:    var(--cream-3);
  --md-primary-fg-color--dark:     var(--cream-1);
  --md-primary-bg-color:           var(--stone-3);
  --md-primary-bg-color--light:    var(--stone-2);

  --md-accent-fg-color:            var(--amber-deep);
  --md-accent-fg-color--transparent: var(--amber-tint);
  --md-accent-bg-color:            var(--cream-1);
  --md-accent-bg-color--light:     var(--cream-2);

  --md-code-bg-color:              var(--cream-2);
  --md-code-fg-color:              var(--stone-3);

  --md-footer-bg-color:            #100c07;
  --md-footer-bg-color--dark:      #100c07;
  --md-footer-fg-color:            var(--stone-2);
  --md-footer-fg-color--light:     var(--stone-1);
  --md-footer-fg-color--lighter:   var(--stone-0);
}

/* ===========================================================
 * Prose typography — apply the design system's heading stack
 * to mkdocs-material's content area.
 * =========================================================== */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--font-display);
  color: var(--stone-3);
}

.md-typeset h1 {
  font-size: 1.7rem;
  line-height: var(--lh-h1);
  letter-spacing: var(--track-h1);
  font-weight: 600;
}

.md-typeset h2 {
  font-size: 1.3rem;
  line-height: var(--lh-h2);
  letter-spacing: var(--track-h2);
  font-weight: 600;
}

.md-typeset h3 {
  font-size: 1.05rem;
  line-height: var(--lh-h3);
  font-weight: 600;
  font-family: var(--font-body);
}

.md-typeset {
  font-size: 0.78rem;
  line-height: var(--lh-body);
  color: var(--stone-2);
}

/* Drop the "Table of contents" label that mkdocs-material puts
   above the right-side TOC. The TOC items themselves are
   self-explanatory. */
.md-nav--secondary > .md-nav__title {
  display: none;
}

/* Drop the duplicate "udoc" + wordmark at the top of the left
   sidebar — the page header already shows the wordmark and
   site name. */
.md-sidebar--primary .md-nav--primary > .md-nav__title {
  display: none;
}

/* mkdocs-material auto-generates an <h1> from the page's nav
   title when the markdown has no H1 of its own. Markdown-derived
   H1s get an id attribute (and a headerlink anchor); the
   auto-generated one does not. Hide the no-id case so pages
   like the home page (whose visual title is the wordmark
   <picture>) don't show a redundant "Overview" heading. */
.md-content__inner > h1:not([id]) {
  display: none;
}

/* Page scrollbar — track AND thumb both dark in both modes.
   Scoped vars pin the values per scheme so the cream/stone
   inversion in dark mode doesn't flip the track to light.
   Firefox reads scrollbar-color; WebKit reads the
   pseudo-elements. */
body {
  --md-scrollbar-track: var(--stone-4);
  --md-scrollbar-thumb: var(--stone-1);
  scrollbar-color: var(--md-scrollbar-thumb) var(--md-scrollbar-track);
  scrollbar-width: thin;
}

body[data-md-color-scheme="slate"] {
  --md-scrollbar-track: var(--cream-3);
  --md-scrollbar-thumb: var(--stone-1);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--md-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--md-scrollbar-thumb);
  border-radius: 6px;
  border: 3px solid var(--md-scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--stone-2);
}



/* Middle body — explicit margin spec from design tokens.
   Selector specificity matches mkdocs-material's sibling-combinator
   rule that injects margin-left/right when sidebars are visible
   (.md-sidebar--primary:not([hidden])~.md-content>.md-content__inner).
   Mirror that selector shape to win at the desktop breakpoint as
   well as the mobile (no-sidebar) breakpoint. */
.md-content__inner.md-typeset,
article.md-content__inner,
[dir="ltr"] .md-sidebar--primary~.md-content>.md-content__inner,
[dir="ltr"] .md-sidebar--secondary~.md-content>.md-content__inner,
[dir="rtl"] .md-sidebar--primary~.md-content>.md-content__inner,
[dir="rtl"] .md-sidebar--secondary~.md-content>.md-content__inner {
  margin: 0 16px 24px;
}

/* Body paragraphs */
.md-typeset p {
  color: var(--stone-2);
}

/* Links — design-system style: stone-3 text with amber
   underline, thicker on hover. */
.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 150ms ease-out;
}

.md-typeset a:hover {
  color: var(--md-typeset-a-color);
  text-decoration-thickness: 2px;
}

.md-typeset a:active {
  color: var(--amber-deep);
}

/* Inline code */
.md-typeset code {
  background: var(--cream-2);
  color: var(--stone-3);
  border-radius: var(--radius-input);
  padding: 0.05em 0.35em;
  font-size: 0.92em;
}

/* Code blocks */
.md-typeset pre > code,
.md-typeset .highlight pre {
  background: var(--cream-2);
  border: 1px solid var(--stone-line);
  border-radius: var(--radius-input);
  color: var(--stone-3);
  font-family: var(--font-mono);
  line-height: var(--lh-mono);
}

/* mkdocs-material default: `.md-content__inner > .highlight { margin: 1em -.8rem }`
   bleeds code blocks outside the article's left/right margin. Cancel the
   horizontal bleed so the code blocks (e.g. __code_0 on the home page)
   stay aligned with the prose. */
.md-content__inner > .highlight,
.md-content__inner > pre {
  margin-left: 0;
  margin-right: 0;
}

/* Horizontal rule */
.md-typeset hr {
  border: 0;
  border-top: 1px solid var(--stone-line);
  margin: var(--space-7) 0;
}

/* Admonitions (note / warning / etc.) — soften them onto
   the cream surface rather than mkdocs-material's stark
   default. */
.md-typeset .admonition,
.md-typeset details {
  background: var(--cream-2);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-input);
}

/* Blockquotes */
.md-typeset blockquote {
  border-left: 3px solid var(--amber);
  color: var(--stone-1);
  background: transparent;
}

/* Tables */
.md-typeset table:not([class]) {
  border: 1px solid var(--stone-line);
  border-radius: var(--radius-input);
  font-size: 0.85em;
}

.md-typeset table:not([class]) th {
  background: var(--cream-2);
  color: var(--stone-3);
  font-family: var(--font-display);
  font-weight: 600;
}

.md-typeset table:not([class]) tr {
  border-bottom: 1px solid var(--stone-line);
}

/* ===========================================================
 * Header — single dark bar in both modes. Wordmark + ALPHA
 * badge on the left, tabs pulled up onto the same row on the
 * right.
 *
 * The `.md-tabs` strip lives in the DOM as a sibling element
 * below `.md-header`. Negative margin-top pulls it up so the
 * two render as one continuous bar; `.md-tabs` background is
 * cleared so the header background shows through.
 * =========================================================== */

.md-header {
  /* Header is always a near-black bar in both light and dark
     modes. Its foreground type / icons need a light cream
     value that does NOT invert with the global scheme. The
     scoped vars below pin the header to design-system stone
     values at their dark-mode (light) end. */
  --md-header-fg:        #ebe1ca; /* stone-3 dark — titles, icons */
  --md-header-fg-strong: #f7f2e7; /* stone-4 dark — emphasis */
  --md-header-fg-muted:  #c8bca7; /* stone-2 dark — secondary */

  background-color: var(--stone-4);
  color: var(--md-header-fg);
  border-bottom: none;
  box-shadow: none;
  height: 2.8rem;
}

[data-md-color-scheme="slate"] .md-header {
  /* Dark mode: header sits at the deep-ink end of the cream
     scale, just below the body bg. */
  background-color: #100c07;
}

.md-header__inner {
  height: 2.8rem;
  padding: 0 var(--space-5);
}

/* Wordmark sized to read at the header height. */
.md-header .md-logo {
  margin-right: 0;
  padding: 0;
  position: relative; /* anchor for the ALPHA badge */
}

.md-header .md-logo img,
.md-header .md-logo svg {
  height: 1.4rem;
  width: auto;
}

/* In light mode the page is cream but the header is dark. The
   light-wordmark SVG has dark "udoc" text — invisible on dark
   header. Use the dark-wordmark (light text + amber dot) at all
   times in the header. */
.md-header .md-logo img {
  content: url("../assets/logos/wordmark-dark.svg");
}


/* Hide the redundant site_name text — the wordmark already
   shows "udoc". */
.md-header__title > .md-header__ellipsis > .md-header__topic:first-child > .md-ellipsis {
  display: none;
}

/* Header buttons (search, theme toggle) tinted to read on the
   dark surface in both schemes. */
.md-header__button {
  color: var(--md-header-fg);
}

.md-header__button:hover {
  color: var(--amber);
}

/* mkdocs-material repo widget — keep the default icon + repo
   name, just tint cream so it reads on the dark header. */
.md-source {
  color: var(--md-header-fg);
}

.md-source:hover {
  color: var(--amber);
}

/* Search input on the dark header — adopt the same fixed
   foreground colors as other header type. */
.md-search__input {
  color: var(--md-header-fg);
}

.md-search__input::placeholder {
  color: var(--md-header-fg-muted);
}

/* ===========================================================
 * Tabs strip — stock mkdocs-material layout (separate strip
 * below the header). Tinted to match the dark header so the
 * two strips read as one zone with a hairline divider.
 * =========================================================== */

.md-tabs {
  background-color: var(--cream-1);
  color: var(--stone-2);
  border-bottom: 1px solid var(--stone-line);
}

.md-tabs__link {
  color: var(--stone-1);
  opacity: 1;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  color: var(--stone-3);
}

.md-tabs__item--active > .md-tabs__link {
  color: var(--stone-3);
  font-weight: 600;
}

/* ===========================================================
 * Sidebar — design-system surface and type. Active link
 * gets the amber underline.
 * =========================================================== */

.md-sidebar {
  background: var(--cream-1);
}

.md-nav__title {
  color: var(--stone-1);
  font-family: var(--font-body);
  font-size: var(--type-meta);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

.md-nav__link {
  color: var(--stone-1);
}

.md-nav__link:hover {
  color: var(--stone-3);
}

.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--stone-3);
  font-weight: 600;
}

/* Search input on header */
.md-search__input {
  background: var(--cream-1);
  color: var(--stone-3);
}

.md-search__input::placeholder {
  color: var(--stone-0);
}

/* ===========================================================
 * Buttons — design-system primary button.
 * =========================================================== */

.md-button {
  font-family: var(--font-body);
  font-weight: 600;
  border: 1px solid var(--stone-line);
  background: var(--cream-2);
  color: var(--stone-3);
  border-radius: var(--radius-input);
  transition: background 150ms ease-out, border-color 150ms ease-out;
}

.md-button:hover,
.md-button:focus {
  background: var(--cream-3);
  border-color: var(--stone-line-deep);
  color: var(--stone-3);
}

.md-button--primary {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--stone-4);
}

.md-button--primary:hover,
.md-button--primary:focus {
  background: var(--amber-deep);
  border-color: var(--amber-deep);
  color: var(--stone-4);
}

[data-md-color-scheme="slate"] .md-button--primary {
  color: var(--cream-1);
}

[data-md-color-scheme="slate"] .md-button--primary:hover {
  color: var(--cream-1);
}


/* ===========================================================
 * Wordmark utility — •udoc, leading bullet is the mark.
 * (For ad-hoc use inside markdown content; the header logo
 * is the SVG.)
 * =========================================================== */

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--stone-3);
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
}

.wordmark::before {
  content: "•";
  color: var(--amber);
  font-size: 0.85em;
  margin-right: 0.05em;
  display: inline-block;
  transform: translateY(-0.18em);
  text-shadow:
    -1px 0 var(--stone-4),
     1px 0 var(--stone-4),
     0 -1px var(--stone-4),
     0  1px var(--stone-4);
}

[data-md-color-scheme="slate"] .wordmark::before {
  text-shadow: none;
}

.wordmark.mono::before {
  color: currentColor;
  text-shadow: none;
}