/**
 * YakPanel — Central brand design tokens
 * Single source of truth for logo-derived Electric Blue palette.
 */
:root {
    /* Core brand */
    --brand-primary: #0073E6;
    --brand-primary-light: #3D9AFF;
    --brand-primary-deep: #0047AB;
    --brand-gradient: linear-gradient(135deg, #0073E6 0%, #0047AB 100%);
    --brand-gradient-logo: linear-gradient(180deg, #1E90FF 0%, #003087 100%);
    --brand-ink: #111827;
    --brand-muted: #64748B;
    --brand-surface: #F7F9FC;
    --brand-dark-base: #0A1628;
    --brand-dark-mid: #0F2447;
    --brand-dark-deep: #1A3460;
    --brand-focus-ring: 0 0 0 3px rgba(0, 115, 230, 0.28);

    /* Capnis template base overrides */
    --tp-theme-green: var(--brand-primary);
    --tp-common-yellow-green: var(--brand-primary-light);
    --tp-common-green-light: var(--brand-primary-light);
    --tp-common-green-regular: var(--brand-primary);
    --tp-common-green-solid: var(--brand-primary-deep);

    /* SaaS palette aliases */
    --saas-accent: var(--brand-primary);
    --saas-accent-2: var(--brand-primary-light);
    --saas-gradient-accent: var(--brand-gradient);

    /* Legacy Yak aliases */
    --yak-green: var(--brand-primary);
    --yak-green-light: var(--brand-primary-light);
    --yak-green-gradient: var(--brand-gradient);
    --yak-forest: var(--brand-primary);
    --yak-lime: var(--brand-primary-light);
    --yak-lime-2: #60A5FA;
    --yak-mint: var(--brand-primary-light);
    --yak-dark-base: var(--brand-dark-base);
    --yak-dark-mid: var(--brand-dark-mid);
    --yak-dark-deep: var(--brand-dark-deep);
    --yak-cream: #F7F9FC;
    --yak-cream-2: #EFF4FA;
}

html.capnis-light body.yak-dm-layout {
    --saas-bg: var(--brand-surface);
    --saas-bg-secondary: #ffffff;
    --saas-text: var(--brand-ink);
    --saas-text-muted: var(--brand-muted);
    --yak-corp-ink: var(--brand-ink);
    --yak-corp-muted: var(--brand-muted);
    --yak-corp-surface: var(--brand-surface);
}

/* JS-normalized header/CTA pills (was btn-green-light-bg) */
.yak-dm-layout .tp-btn-black.btn-green-light-bg .tp-btn-black-text,
.yak-dm-layout .tp-btn-black.btn-brand-light-bg .tp-btn-black-text,
.yak-dm-layout .tp-btn-black.btn-green-light-bg .tp-btn-black-circle,
.yak-dm-layout .tp-btn-black.btn-brand-light-bg .tp-btn-black-circle {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

.yak-dm-layout .tp-btn-black.btn-green-light-bg .tp-btn-black-circle svg,
.yak-dm-layout .tp-btn-black.btn-brand-light-bg .tp-btn-black-circle svg {
    color: #fff !important;
}

.yak-dm-layout .tp-btn-black.btn-green-light-bg:hover .tp-btn-black-text,
.yak-dm-layout .tp-btn-black.btn-brand-light-bg:hover .tp-btn-black-text,
.yak-dm-layout .tp-btn-black.btn-green-light-bg:hover .tp-btn-black-circle,
.yak-dm-layout .tp-btn-black.btn-brand-light-bg:hover .tp-btn-black-circle {
    background-color: var(--brand-primary-deep) !important;
}