/* ============================================================
   Fluids Pro Docs — Branded Custom CSS (synced with app)
   ============================================================ */

/* ---- Brand Tokens ---- */
:root {
    --ll-magenta-50: #fff0ff;
    --ll-magenta-100: #ffe0ff;
    --ll-magenta-200: #ffb3ff;
    --ll-magenta-300: #ff80ff;
    --ll-magenta-400: #ff4dff;
    --ll-magenta-500: #ff00ff;
    --ll-magenta-600: #e600e6;
    --ll-magenta-700: #b300b3;
    --ll-magenta-800: #800080;
    --ll-magenta-900: #4d004d;
    --ll-magenta-950: #2a002a;

    --ll-zinc-50: #fafafa;
    --ll-zinc-100: #f4f4f5;
    --ll-zinc-200: #e4e4e7;
    --ll-zinc-300: #d4d4d8;
    --ll-zinc-400: #a1a1aa;
    --ll-zinc-500: #71717a;
    --ll-zinc-600: #52525b;
    --ll-zinc-700: #3f3f46;
    --ll-zinc-800: #27272a;
    --ll-zinc-900: #18181b;
    --ll-zinc-950: #09090b;
}

/* ---- Header (light) ---- */
.md-header {
    background-color: #fff;
    color: var(--ll-zinc-900);
    border-bottom: 1px solid var(--ll-zinc-200);
}

.md-header[data-md-color-scheme] {
    background-color: #fff;
}

.md-header__inner {
    padding: 0 0.8rem;
}

.md-header__title,
.md-header__topic {
    color: var(--ll-zinc-900);
}

/* ---- Header / app-logo (wide wordmark) ---- */
.md-header__button.md-logo {
    margin: 0;
    padding: 0.4rem 0;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 2rem;
    width: auto;
    display: block;
}

/* Logo: light mode shows logo_light, dark mode shows logo_dark */
.md-header__button.md-logo img {
    content: url("../_assets/logo_light.png");
}

/* ---- Header (dark) ---- */
[data-md-color-scheme="slate"] .md-header {
    background-color: var(--ll-zinc-950);
    color: #fff;
    border-bottom-color: var(--ll-zinc-800);
}

[data-md-color-scheme="slate"] .md-header__title,
[data-md-color-scheme="slate"] .md-header__topic {
    color: #fff;
}

[data-md-color-scheme="slate"] .md-header__button.md-logo img {
    content: url("../_assets/logo_dark.png");
}

/* ---- Top navigation tabs (light) ---- */
.md-tabs {
    background-color: #fff;
    color: var(--ll-zinc-900);
    border-bottom: 1px solid var(--ll-zinc-200);
}

.md-tabs__link {
    color: var(--ll-zinc-600);
    font-weight: 500;
}

.md-tabs__link:hover,
.md-tabs__link--active {
    color: var(--ll-magenta-500);
}

/* ---- Top navigation tabs (dark) ---- */
[data-md-color-scheme="slate"] .md-tabs {
    background-color: var(--ll-zinc-950);
    color: #fff;
    border-bottom-color: var(--ll-zinc-800);
}

[data-md-color-scheme="slate"] .md-tabs__link {
    color: var(--ll-zinc-400);
}

[data-md-color-scheme="slate"] .md-tabs__link:hover,
[data-md-color-scheme="slate"] .md-tabs__link--active {
    color: var(--ll-magenta-400);
}

/* ---- Footer (light) ---- */
.md-footer {
    background-color: #fff;
    color: var(--ll-zinc-900);
    border-top: 1px solid var(--ll-zinc-200);
}

.md-footer-nav,
.md-footer-meta {
    background-color: #fff;
    color: var(--ll-zinc-600);
}

.md-footer-nav a,
.md-footer-meta a,
.md-footer__link {
    color: var(--ll-zinc-600) !important;
}

.md-footer-nav a:hover,
.md-footer-meta a:hover,
.md-footer__link:hover {
    color: var(--ll-magenta-500) !important;
}

/* ---- Footer (dark) ---- */
[data-md-color-scheme="slate"] .md-footer,
[data-md-color-scheme="slate"] .md-footer-nav,
[data-md-color-scheme="slate"] .md-footer-meta {
    background-color: var(--ll-zinc-950);
    color: #fff;
    border-top-color: var(--ll-zinc-800);
}

[data-md-color-scheme="slate"] .md-footer-nav a,
[data-md-color-scheme="slate"] .md-footer-meta a,
[data-md-color-scheme="slate"] .md-footer__link {
    color: var(--ll-zinc-400) !important;
}

[data-md-color-scheme="slate"] .md-footer-nav a:hover,
[data-md-color-scheme="slate"] .md-footer-meta a:hover,
[data-md-color-scheme="slate"] .md-footer__link:hover {
    color: var(--ll-magenta-400) !important;
}

/* ---- Navigation sidebar (light) ---- */
.md-nav {
    color: var(--ll-zinc-700);
}

.md-nav__link {
    color: var(--ll-zinc-700);
}

.md-nav__link:hover,
.md-nav__link--active {
    color: var(--ll-magenta-500);
}

/* ---- Navigation sidebar (dark) ---- */
[data-md-color-scheme="slate"] .md-nav {
    color: var(--ll-zinc-300);
}

[data-md-color-scheme="slate"] .md-nav__link {
    color: var(--ll-zinc-300);
}

[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link--active {
    color: var(--ll-magenta-400);
}

/* ---- Content links ---- */
.md-typeset a {
    color: var(--ll-magenta-500);
    text-decoration-color: currentColor;
}

.md-typeset a:hover {
    color: var(--ll-magenta-600);
}

/* ---- Dark mode content links ---- */
[data-md-color-scheme="slate"] .md-typeset a {
    color: var(--ll-magenta-400);
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
    color: var(--ll-magenta-300);
}

/* ---- Header anchor (permalink) ---- */
.md-typeset .headerlink {
    color: var(--ll-magenta-500);
}

.md-typeset .headerlink:hover {
    color: var(--ll-magenta-600);
}

[data-md-color-scheme="slate"] .md-typeset .headerlink {
    color: var(--ll-magenta-400);
}

[data-md-color-scheme="slate"] .md-typeset .headerlink:hover {
    color: var(--ll-magenta-300);
}

/* ---- Buttons ---- */
.md-button {
    background-color: var(--ll-magenta-500);
    border-color: var(--ll-magenta-500);
    color: #fff;
}

.md-button:hover {
    background-color: var(--ll-magenta-600);
    border-color: var(--ll-magenta-600);
}

/* ---- Tables ---- */
.md-typeset table:not([class]) {
    border: 1px solid var(--ll-zinc-200);
}

.md-typeset table:not([class]) th {
    background-color: var(--ll-magenta-50);
    color: var(--ll-zinc-800);
    font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
    border-color: var(--ll-zinc-700);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
    background-color: var(--ll-magenta-950);
    color: #fff;
}

/* ---- Code blocks ---- */
.highlight {
    background-color: var(--ll-zinc-50);
    border-radius: 6px;
    padding: 1rem;
}

[data-md-color-scheme="slate"] .highlight {
    background-color: var(--ll-zinc-900);
}

/* ---- Search focus ---- */
.md-search__input {
    caret-color: var(--ll-magenta-500);
}

.md-search__input:focus {
    border-color: var(--ll-magenta-500);
}

.md-search-result__more summary {
    color: var(--ll-magenta-500);
}

[data-md-color-scheme="slate"] .md-search__input:focus {
    border-color: var(--ll-magenta-400);
}

/* ---- Selected / highlighted text ---- */
.md-typeset ::selection {
    background-color: var(--ll-magenta-200);
}

[data-md-color-scheme="slate"] .md-typeset ::selection {
    background-color: var(--ll-magenta-800);
}

/* ---- Content width toggle (light) ---- */
.ll-width-toggle {
    color: var(--ll-zinc-500);
    opacity: 0.85;
    cursor: pointer;
}

.ll-width-toggle:hover {
    opacity: 1;
    color: var(--ll-magenta-500);
}

[data-md-color-scheme="slate"] .ll-width-toggle {
    color: var(--ll-zinc-400);
}

[data-md-color-scheme="slate"] .ll-width-toggle:hover {
    color: var(--ll-magenta-400);
}

/* ---- Full-width layout mode ---- */
body.ll-layout-full-width .md-grid {
    max-width: 100%;
}

/* ---- Tab / Admonition styling ---- */
.md-typeset .tabbed-set input:checked + .tabbed-labels {
    border-bottom-color: var(--ll-magenta-500);
}

.md-typeset .tabbed-labels label:hover {
    color: var(--ll-magenta-500);
}

[data-md-color-scheme="slate"]
    .md-typeset
    .tabbed-set
    input:checked
    + .tabbed-labels {
    border-bottom-color: var(--ll-magenta-400);
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-labels label:hover {
    color: var(--ll-magenta-400);
}

/* ---- Admonitions ---- */
.md-typeset .admonition {
    border-left-color: var(--ll-magenta-500) !important;
}

[data-md-color-scheme="slate"] .md-typeset .admonition {
    border-left-color: var(--ll-magenta-400) !important;
}