/*
 * Barney — DevLab theme overrides
 *
 * Light and dark palettes, code surfaces, semantic callouts
 * and theme-aware brand assets.
 * Keep component layout and structural styling in DevLab.
 */

/* ============================================================
   Light theme (default)
   ============================================================ */

:root,
:root[data-theme="light"] {
    color-scheme: light;

    /* Core palette */
    --color-bg: #F4EFE6;
    --color-surface: #FFFCF6;
    --color-fg: #252521;
    --color-muted: #716E65;
    --color-border: #DDD6CA;

    /* Brand */
    --color-accent: #A94F35;
    --color-accent-contrast: #FFFFFF;

    /* Inline code */
    --color-code-bg: #EEEAE2;
    --color-code-fg: #38352F;

    /* Code blocks */
    --color-pre-bg: #252521;
    --color-pre-fg: #F4EFE6;
    --color-pre-scheme: dark;

    /* Callouts */
    --color-callout-info-bg: #E9EAE5;
    --color-callout-info-border: #899080;
    --color-callout-info-fg: #30352C;

    --color-callout-warning-bg: #F3E9D5;
    --color-callout-warning-border: #B99A56;
    --color-callout-warning-fg: #493A20;

    --color-callout-error-bg: #F2E1DC;
    --color-callout-error-border: #A94F35;
    --color-callout-error-fg: #542B20;

    --color-callout-tip-bg: #E8EBDD;
    --color-callout-tip-border: #77806B;
    --color-callout-tip-fg: #343C2D;
}


/* ============================================================
   System dark preference
   ============================================================ */

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        /* Core palette */
        --color-bg: #252521;
        --color-surface: #302F2A;
        --color-fg: #F4EFE6;
        --color-muted: #B4AEA1;
        --color-border: #48463F;

        /* Brand */
        --color-accent: #D17A5A;
        --color-accent-contrast: #252521;

        /* Inline code */
        --color-code-bg: #302F2A;
        --color-code-fg: #F4EFE6;

        /* Code blocks */
        --color-pre-bg: #1D1D1A;
        --color-pre-fg: #F4EFE6;
        --color-pre-scheme: dark;

        /* Callouts */
        --color-callout-info-bg: #30352F;
        --color-callout-info-border: #899080;
        --color-callout-info-fg: #E5E8DF;

        --color-callout-warning-bg: #403827;
        --color-callout-warning-border: #B99A56;
        --color-callout-warning-fg: #F3E9D5;

        --color-callout-error-bg: #422D28;
        --color-callout-error-border: #C46B4E;
        --color-callout-error-fg: #F4E1DA;

        --color-callout-tip-bg: #30382C;
        --color-callout-tip-border: #899875;
        --color-callout-tip-fg: #E5EBDD;
    }
}


/* ============================================================
   Explicit dark theme selection
   ============================================================ */

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Core palette */
    --color-bg: #252521;
    --color-surface: #302F2A;
    --color-fg: #F4EFE6;
    --color-muted: #B4AEA1;
    --color-border: #48463F;

    /* Brand */
    --color-accent: #D17A5A;
    --color-accent-contrast: #252521;

    /* Inline code */
    --color-code-bg: #302F2A;
    --color-code-fg: #F4EFE6;

    /* Code blocks */
    --color-pre-bg: #1D1D1A;
    --color-pre-fg: #F4EFE6;
    --color-pre-scheme: dark;

    /* Callouts */
    --color-callout-info-bg: #30352F;
    --color-callout-info-border: #899080;
    --color-callout-info-fg: #E5E8DF;

    --color-callout-warning-bg: #403827;
    --color-callout-warning-border: #B99A56;
    --color-callout-warning-fg: #F3E9D5;

    --color-callout-error-bg: #422D28;
    --color-callout-error-border: #C46B4E;
    --color-callout-error-fg: #F4E1DA;

    --color-callout-tip-bg: #30382C;
    --color-callout-tip-border: #899875;
    --color-callout-tip-fg: #E5EBDD;
}


/* ============================================================
   Barney navigation brand lockup
   ============================================================ */

.site-logo {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.7rem;

    width: auto;
    text-decoration: none;
    white-space: nowrap;
}

/* Symbol container */

.site-logo-marks {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
}

/* Both symbol variants occupy the same space */

.site-logo-marks .site-logo-mark {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Light is the default */

.site-logo-mark-light {
    display: block;
}

.site-logo-mark-dark {
    display: none;
}

/* System dark preference, unless explicitly overridden */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-logo-mark-light {
        display: none;
    }

    :root:not([data-theme="light"]) .site-logo-mark-dark {
        display: block;
    }
}

/* Explicit light selection */

:root[data-theme="light"] .site-logo-mark-light {
    display: block;
}

:root[data-theme="light"] .site-logo-mark-dark {
    display: none;
}

/* Explicit dark selection */

:root[data-theme="dark"] .site-logo-mark-light {
    display: none;
}

:root[data-theme="dark"] .site-logo-mark-dark {
    display: block;
}


/* Styled Barney wordmark */

.site-logo .site-logo-text {
    display: inline-block;
    flex: 0 0 auto;

    font-family: inherit;
    font-size: 1.45rem;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.045em;

    color: var(--color-fg, inherit);
    white-space: nowrap;
}


/* ============================================================
   Responsive brand lockup
   ============================================================ */

@media (max-width: 640px) {
    .site-logo {
        gap: 0.5rem;
    }

    .site-logo-marks {
        width: 36px;
        height: 36px;
    }

    .site-logo .site-logo-text {
        font-size: 1.25rem;
    }
}