/**
 * Loveshack documentation theme — Tokyo Night.
 *
 * Palette and typography mirror the loveshack-child theme's
 * assets/css/tokyo-night.css: Tokyo Night (night) for dark, Tokyo Night Day
 * for light, JetBrains Mono throughout.
 *
 * Everything here is a Material design-token override rather than a rule
 * override, so it survives Material upgrades.
 */

:root {
    /* Tokyo Night (night) ---------------------------------------------------- */
    --tn-bg: #1a1b26;
    --tn-bg-raised: #24283b;
    --tn-bg-deep: #16161e;
    --tn-border: #3b4261;
    --tn-border-light: #292e42;
    --tn-text: #c0caf5;
    --tn-text-secondary: #a9b1d6;
    --tn-text-muted: #737aa2;
    --tn-blue: #7aa2f7;
    --tn-purple: #bb9af7;

    /* Tokyo Night Day -------------------------------------------------------- */
    --tnd-bg: #e1e2e7;
    --tnd-bg-raised: #e9e9ec;
    --tnd-bg-deep: #d5d6db;
    --tnd-border: #a8aecb;
    --tnd-border-light: #c4c8da;
    --tnd-text: #3760bf;
    --tnd-text-secondary: #6172b0;
    /* Tokyo Night Day's own blue is #2e7de9, which measures 3.32:1 on the page
       and fails AA for body-sized link text. Darkened along the same hue. */
    --tnd-blue: #2559b3;
    --tnd-purple: #7847d1;
    /* Tokyo Night Day's secondary #6172b0 reaches only 3.19:1 on the page's
       lower half. Material uses this tone for real text, including nav labels,
       so it is darkened along the same hue. */
    --tnd-text-secondary-strong: #4a5788;

    /* Matches the theme's own radius scale. */
    --ls-radius-sm: 8px;
    --ls-radius-md: 12px;
    --ls-radius-lg: 16px;

    /* Typography ------------------------------------------------------------- */
    /* Material composes these into --md-text-font-family with its own fallbacks
       appended, so name the family only. */
    --md-text-font: "JetBrains Mono";
    --md-code-font: "JetBrains Mono";
}

/* Light scheme, and the base for when no scheme attribute is set yet --------- */

:root,
[data-md-color-scheme="default"] {
    --md-primary-fg-color: var(--tnd-bg-deep);
    --md-primary-fg-color--light: var(--tnd-bg-raised);
    --md-primary-fg-color--dark: var(--tnd-border-light);
    --md-primary-bg-color: var(--tnd-text);
    --md-primary-bg-color--light: var(--tnd-text-secondary);

    --md-accent-fg-color: var(--tnd-blue);
    --md-accent-fg-color--transparent: rgba(46, 125, 233, 0.12);
    --md-accent-bg-color: var(--tnd-bg-raised);

    --md-default-fg-color: var(--tnd-text);
    --md-default-fg-color--light: var(--tnd-text-secondary-strong);
    --md-default-fg-color--lighter: rgba(97, 114, 176, 0.5);
    --md-default-fg-color--lightest: rgba(97, 114, 176, 0.12);
    --md-default-bg-color: var(--tnd-bg);

    --md-typeset-color: var(--tnd-text);
    --md-typeset-a-color: var(--tnd-blue);

    --md-code-bg-color: var(--tnd-bg-deep);
    --md-code-fg-color: var(--tnd-text);

    --md-footer-bg-color: var(--tnd-bg-deep);
    --md-footer-bg-color--dark: var(--tnd-border-light);

    --ls-gradient-top: var(--tnd-bg-raised);
    /* The child theme ramps to #d5d6db. Docs stop at Tokyo Night Day's own
       background instead: on #d5d6db the palette's primary text is 4.03:1, so
       nav links sitting on the page's lower half would fail AA. */
    --ls-gradient-bottom: var(--tnd-bg);
    --ls-surface: rgba(233, 233, 236, 0.75);
    --ls-chrome: rgba(213, 214, 219, 0.8);
    --ls-surface-border: rgba(168, 174, 203, 0.6);
}

/* Dark scheme --------------------------------------------------------------- */

[data-md-color-scheme="slate"] {
    --md-primary-fg-color: var(--tn-bg-deep);
    --md-primary-fg-color--light: var(--tn-bg-raised);
    --md-primary-fg-color--dark: #101017;
    --md-primary-bg-color: var(--tn-text);
    --md-primary-bg-color--light: var(--tn-text-secondary);

    --md-accent-fg-color: var(--tn-blue);
    --md-accent-fg-color--transparent: rgba(122, 162, 247, 0.15);
    --md-accent-bg-color: var(--tn-bg-deep);

    --md-default-fg-color: var(--tn-text);
    /* Material uses --light for real text, including nav labels. Tokyo Night's
       muted #737aa2 only reaches 3.49:1 on the page, so the secondary tone
       carries that role and #737aa2 stays decorative. */
    --md-default-fg-color--light: var(--tn-text-secondary);
    --md-default-fg-color--lighter: var(--tn-text-muted);
    --md-default-fg-color--lightest: rgba(115, 122, 162, 0.25);
    --md-default-bg-color: var(--tn-bg);

    --md-typeset-color: var(--tn-text);
    --md-typeset-a-color: var(--tn-blue);

    --md-code-bg-color: var(--tn-bg-deep);
    --md-code-fg-color: var(--tn-text);

    --md-footer-bg-color: var(--tn-bg-deep);
    --md-footer-bg-color--dark: #101017;

    --md-shadow-z1: 0 2px 16px rgba(22, 22, 30, 0.5);
    --md-shadow-z2: 0 8px 30px rgba(22, 22, 30, 0.7);

    --ls-gradient-top: var(--tn-bg-raised);
    --ls-gradient-bottom: var(--tn-bg);
    --ls-surface: rgba(36, 40, 59, 0.6);
    --ls-chrome: rgba(22, 22, 30, 0.72);
    --ls-surface-border: rgba(59, 66, 97, 0.7);
}

/* Typography ---------------------------------------------------------------- */

/* JetBrains Mono sets far fewer characters per line than Inter, so the measure
   is widened to keep line lengths in a readable range. */
.md-grid {
    max-width: 76rem;
}

.md-typeset {
    font-size: 0.74rem;
    line-height: 1.7;
}

/* Mono at heading sizes needs tighter tracking and less weight to stay calm. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.md-typeset h1 {
    color: var(--md-default-fg-color);
}

/* Inline code is already mono; a border keeps it distinct from body text now
   that the two share a family. */
.md-typeset code {
    border: 1px solid var(--ls-surface-border);
    border-radius: var(--ls-radius-sm);
}

.md-typeset pre > code {
    border: 0;
}

/* Shared -------------------------------------------------------------------- */

::selection {
    background: var(--md-accent-fg-color--transparent);
}

/* Rounded surfaces, matching the theme's card treatment. */
.md-typeset pre > code,
.md-typeset .highlight > pre,
.md-typeset details,
.md-typeset .admonition,
.md-typeset table:not([class]) {
    border-radius: var(--ls-radius-md);
}

/* The version selector should read as a control, not as body text. */
.md-version__current {
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Reference tables are dense with code spans; keep them tight. */
.md-typeset table:not([class]) th {
    font-weight: 700;
}

.md-typeset table:not([class]) code {
    white-space: nowrap;
}

/* Give the active nav item the accent instead of Material's primary. */
.md-nav__link--active,
.md-nav__link--active:focus,
.md-nav__link--active:hover {
    color: var(--md-accent-fg-color);
    font-weight: 700;
}

.md-search__form {
    border-radius: var(--ls-radius-sm);
}

.md-header {
    box-shadow: none;
    border-bottom: 1px solid var(--ls-surface-border);
}

/* Gradient backdrop ---------------------------------------------------------
 *
 * Mirrors the child theme's body::before, which gives both schemes a gradient:
 * #24283b -> #1a1b26 dark, #e9e9ec -> #d5d6db light.
 */

body,
body[data-md-color-scheme],
[data-md-color-scheme] body {
    background-color: transparent;
}

/* Material sets data-md-color-scheme on <body>, so a descendant selector can
   never match body itself. Both placements are matched. */
body::before,
body[data-md-color-scheme]::before,
[data-md-color-scheme] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(var(--ls-gradient-top), var(--ls-gradient-bottom));
}

/* The content column keeps the theme's card surface. Navigation and the table
   of contents sit on the gradient directly — unlike the previous purple
   backdrop, both ends of the Tokyo Night gradient are dark enough that nav text
   clears AA without a panel. */
.md-content {
    background: var(--ls-surface);
    border: 1px solid var(--ls-surface-border);
    border-radius: var(--ls-radius-lg);
    backdrop-filter: blur(6px);
    margin-bottom: 1.2rem;
}

.md-header,
.md-footer {
    background-color: var(--ls-chrome);
    backdrop-filter: blur(10px);
}

.md-footer-meta {
    background-color: transparent;
}

/* Tables keep their own surface so they stay readable wherever they fall. */
.md-typeset table:not([class]) {
    background-color: var(--ls-surface);
}