:root {
    --cb-bg: #ebe3d2;
    --cb-bg-soft: #f6f1e7;
    --cb-surface: rgba(255, 255, 255, 0.92);
    --cb-text: #15222e;
    --cb-muted: #5c6773;
    --cb-accent: #0f766e;
    --cb-accent-strong: #115e59;
    --cb-warm: #f59e0b;
    --cb-warm-strong: #b45309;
    --cb-border: rgba(21, 34, 46, 0.12);
    --cb-shadow: 0 18px 42px rgba(21, 34, 46, 0.1);
    --cb-card-shadow-hover: 0 12px 30px rgba(21, 34, 46, 0.1);
}

[data-md-color-scheme="caddybuddy"] {
    --md-primary-fg-color: var(--cb-accent);
    --md-primary-fg-color--light: #14b8a6;
    --md-primary-fg-color--dark: var(--cb-accent-strong);
    --md-accent-fg-color: var(--cb-warm-strong);
    --md-default-bg-color: var(--cb-bg-soft);
    --md-default-fg-color: var(--cb-text);
    /* Foreground-Abstufungen explizit setzen, damit Tagline und
       Card-Borders die Marken-Töne statt der Material-Defaults nutzen. */
    --md-default-fg-color--light: var(--cb-muted);
    --md-default-fg-color--lighter: rgba(92, 103, 115, 0.5);
    --md-default-fg-color--lightest: var(--cb-border);
    --md-typeset-a-color: var(--cb-accent);
    --md-code-bg-color: rgba(255, 255, 255, 0.82);
}

[data-md-color-scheme="caddybuddy-dark"] {
    /* Marken-Variablen für den gesamten Dark-Scope überschreiben, nicht
       nur innerhalb von .md-content__inner (sonst erben Tabs, Suche,
       Footer etc. weiterhin die hellen :root-Werte). */
    --cb-surface: rgba(21, 34, 46, 0.9);
    --cb-border: rgba(238, 242, 244, 0.1);
    --cb-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
    --cb-card-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.6);

    --md-primary-fg-color: var(--cb-accent);
    --md-primary-fg-color--light: #2dd4bf;
    --md-primary-fg-color--dark: var(--cb-accent-strong);
    --md-accent-fg-color: #fbbf24;
    --md-default-bg-color: #101a23;
    --md-default-bg-color--light: #15222e;
    --md-default-bg-color--lighter: #1d2d3a;
    --md-default-bg-color--lightest: #263947;
    --md-default-fg-color: #eef2f4;
    --md-default-fg-color--light: rgba(238, 242, 244, 0.78);
    --md-default-fg-color--lighter: rgba(238, 242, 244, 0.4);
    --md-default-fg-color--lightest: rgba(238, 242, 244, 0.16);
    --md-typeset-color: #eef2f4;
    --md-typeset-a-color: #5eead4;
    --md-code-fg-color: #eef2f4;
    --md-code-bg-color: #15222e;
    --md-footer-bg-color: #0b131a;
    --md-footer-bg-color--dark: #080e13;
    /* Material's own :root fallback pins these to the light defaults for
       any scheme name other than the built-in "default"/"slate" (see the
       #only-light/#only-dark comment above); re-declare them here so
       admonitions and <details> (e.g. the changelog's "Previous
       versions..." block) aren't stuck with a light background/text in
       dark mode. */
    --md-admonition-fg-color: var(--md-default-fg-color);
    --md-admonition-bg-color: var(--md-default-bg-color);
}

body {
    font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

[data-md-color-scheme="caddybuddy"] body {
    background:
        radial-gradient(circle at 84% 8%, rgba(15, 118, 110, 0.1), transparent 28rem),
        linear-gradient(180deg, #f6f1e7 0%, #e8dfd0 100%);
}

.md-header,
.md-tabs {
    background: linear-gradient(110deg, var(--cb-accent), var(--cb-accent-strong));
}

.md-main__inner {
    padding-bottom: 2rem;
}

.md-content__inner {
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    border-radius: 1.25rem;
    box-shadow: var(--cb-shadow);
    margin-top: 1.25rem;
    padding: clamp(1.3rem, 3vw, 2.4rem);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
    color: inherit;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.md-typeset h1 {
    margin-bottom: 0.65em;
}

.md-typeset .hero {
    padding: 1rem 0 1.5rem;
    text-align: center;
}

.md-typeset .hero img {
    width: 100%;
    height: auto;
    max-width: min(100%, 31rem);
}

/* Material's built-in #only-light/#only-dark rules target the default
   scheme names ("default"/"slate"). Since this theme uses custom scheme
   names ("caddybuddy"/"caddybuddy-dark"), those rules never match and both
   logo variants render stacked. Re-declare the toggle for our scheme names. */
[data-md-color-scheme="caddybuddy"] img[src$="#only-dark"],
[data-md-color-scheme="caddybuddy-dark"] img[src$="#only-light"] {
    display: none;
}

.md-typeset .hero__tagline {
    color: var(--md-default-fg-color--light);
    font-size: 1.08rem;
    margin: 1rem auto 1.5rem;
    max-width: 46rem;
}

.md-typeset .grid.cards {
    gap: 1rem;
}

.md-typeset .grid.cards>ul>li,
.md-typeset .grid.cards>ol>li {
    /* Fallback für Browser ohne color-mix-Unterstützung. */
    background: var(--md-default-bg-color);
    background: color-mix(in srgb, var(--md-default-bg-color) 82%, transparent);
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 1rem;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.md-typeset .grid.cards>ul>li:hover,
.md-typeset .grid.cards>ol>li:hover {
    border-color: rgba(15, 118, 110, 0.45);
    box-shadow: var(--cb-card-shadow-hover);
    transform: translateY(-2px);
}

.md-typeset .md-button {
    border-radius: 999px;
}

.md-typeset .md-button--primary {
    background: var(--cb-accent);
    border-color: var(--cb-accent);
}

.md-typeset .md-button--primary:hover {
    background: var(--cb-accent-strong);
    border-color: var(--cb-accent-strong);
}

.md-typeset .md-button:focus-visible {
    outline: 2px solid var(--cb-accent);
    outline-offset: 2px;
}

.md-typeset code,
.highlight {
    border-radius: 0.65rem;
}

.md-typeset table:not([class]) {
    border-radius: 0.75rem;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

    .md-typeset .grid.cards>ul>li,
    .md-typeset .grid.cards>ol>li {
        transition: none;
    }

    .md-typeset .grid.cards>ul>li:hover,
    .md-typeset .grid.cards>ol>li:hover {
        transform: none;
    }
}

@media screen and (max-width: 76.234375em) {
    .md-content__inner {
        border-radius: 1rem;
        margin-inline: 0.4rem;
    }
}