/**
 * PRATICK Feed brand overlay (Stage 1).
 * Visual tokens + remaps only — do not attach behavior here.
 * Locked palette: Brand Assets/Pratick Feed.dc.html
 */
:root {
    --pratick-navy: #0a1120;
    --pratick-navy-raised: #121a2e;
    --pratick-navy-muted: #161129;
    --pratick-hairline: #243350;
    --pratick-hairline-soft: #1a2438;
    --pratick-violet: #8b5cf6;
    --pratick-violet-hover: #9d74f7;
    --pratick-violet-soft: rgba(139, 92, 246, 0.18);
    --pratick-violet-ring: rgba(139, 92, 246, 0.45);
    --pratick-ink: #eef1f6;
    --pratick-muted: #7c8aa3;
    --pratick-secondary: #b7c0d1;
    --pratick-caption: #8993a6;
    --pratick-light-canvas: #ffffff;
    --pratick-light-raised: #f5f6f8;
    --pratick-light-ink: #1a2130;
    --pratick-light-muted: #8a94a6;
    --pratick-font-ui: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --pratick-font-wordmark: "Fraunces", Georgia, serif;
}

html.dark {
    color-scheme: dark;
}

html.light {
    color-scheme: light;
}

body {
    font-family: var(--pratick-font-ui);
}

html.dark body,
body.bg-slate-950 {
    background-color: var(--pratick-navy) !important;
    color: var(--pratick-ink) !important;
}

html.light body {
    background-color: var(--pratick-light-raised) !important;
    color: var(--pratick-light-ink) !important;
}

.brand-wordmark {
    font-family: var(--pratick-font-wordmark);
    font-style: italic;
    font-weight: 600;
    color: var(--pratick-violet);
    letter-spacing: -0.02em;
}

/* --- Theme helpers already used in markup --- */
html.dark .theme-surface {
    background-color: var(--pratick-navy-raised) !important;
    border-color: var(--pratick-hairline) !important;
}

html.dark .theme-surface-muted {
    background-color: rgba(10, 17, 32, 0.72) !important;
    border-color: var(--pratick-hairline-soft) !important;
}

html.dark .theme-input {
    background-color: var(--pratick-navy) !important;
    border-color: var(--pratick-hairline) !important;
    color: var(--pratick-ink) !important;
}

html.dark .theme-muted {
    color: var(--pratick-muted) !important;
}

html.dark .theme-heading-gradient {
    background-image: linear-gradient(to right, var(--pratick-ink), var(--pratick-caption)) !important;
}

html.dark .theme-badge,
html.light .theme-badge {
    background-color: var(--pratick-violet-soft) !important;
    border-color: var(--pratick-violet-ring) !important;
    color: var(--pratick-violet) !important;
}

html.light .theme-surface {
    background-color: var(--pratick-light-canvas) !important;
    border-color: #edeef2 !important;
}

html.light .theme-surface-muted {
    background-color: var(--pratick-light-raised) !important;
    border-color: #edeef2 !important;
}

html.light .theme-input {
    background-color: var(--pratick-light-canvas) !important;
    border-color: #d5d8e0 !important;
    color: var(--pratick-light-ink) !important;
}

html.light .theme-muted {
    color: var(--pratick-light-muted) !important;
}

html.light .theme-heading-gradient {
    background-image: linear-gradient(to right, var(--pratick-light-ink), #4b5563) !important;
}

html.light header,
html.light footer {
    border-color: #edeef2 !important;
}

.portal-free-upgrade-panel {
    border-color: var(--pratick-violet-ring) !important;
}

html.dark .portal-free-upgrade-panel {
    background: linear-gradient(
        to bottom right,
        rgba(22, 17, 41, 0.92),
        rgba(10, 17, 32, 0.94)
    ) !important;
}

html.light .portal-free-upgrade-panel {
    background: linear-gradient(to bottom right, #f5f3ff, var(--pratick-light-raised)) !important;
}

.portal-feed-card--selected {
    border-color: var(--pratick-violet-ring) !important;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25) !important;
}

/* --- Remap existing Tailwind blue utilities (JS class names stay unchanged) --- */
.bg-blue-600,
.peer:checked ~ .peer-checked\:bg-blue-600 {
    background-color: var(--pratick-violet) !important;
}

.hover\:bg-blue-500:hover {
    background-color: var(--pratick-violet-hover) !important;
}

.text-blue-400,
.text-blue-500,
.text-blue-600,
.hover\:text-blue-400:hover,
.hover\:text-blue-500:hover {
    color: var(--pratick-violet) !important;
}

.border-blue-500,
.border-blue-400,
.focus\:border-blue-500:focus {
    border-color: var(--pratick-violet) !important;
}

.border-blue-500\/60 {
    border-color: rgba(139, 92, 246, 0.6) !important;
}

.border-blue-900\/50 {
    border-color: rgba(139, 92, 246, 0.35) !important;
}

.bg-blue-600\/10,
.bg-blue-500\/10 {
    background-color: var(--pratick-violet-soft) !important;
}

.hover\:bg-blue-600\/20:hover {
    background-color: rgba(139, 92, 246, 0.2) !important;
}

.border-blue-500\/20 {
    border-color: rgba(139, 92, 246, 0.2) !important;
}

.border-l-blue-500 {
    border-left-color: var(--pratick-violet) !important;
}

.bg-blue-950 {
    background-color: var(--pratick-navy-muted) !important;
}

.bg-blue-950\/30 {
    background-color: rgba(139, 92, 246, 0.12) !important;
}

.focus\:ring-blue-500:focus,
.focus\:ring-blue-500:focus-visible {
    --tw-ring-color: var(--pratick-violet) !important;
    outline-color: var(--pratick-violet) !important;
}

.peer-focus\:ring-blue-500\/40:focus,
.peer:focus + .peer-focus\:ring-blue-500\/40,
.peer:focus-visible ~ .peer-focus\:ring-blue-500\/40 {
    --tw-ring-color: var(--pratick-violet-ring) !important;
}

.bg-slate-950 {
    background-color: var(--pratick-navy) !important;
}

.border-slate-800,
.border-slate-900,
.border-slate-700 {
    border-color: var(--pratick-hairline) !important;
}

html.dark .text-slate-100,
html.dark .text-white,
body.bg-slate-950 .text-slate-100,
body.bg-slate-950 .text-white {
    color: var(--pratick-ink);
}

body.bg-slate-950 .text-slate-400,
body.bg-slate-950 .text-slate-500,
body.bg-slate-950 .text-slate-600 {
    color: var(--pratick-muted) !important;
}

body.bg-slate-950 .text-slate-300,
body.bg-slate-950 .text-slate-200 {
    color: var(--pratick-secondary) !important;
}

/* Stage 2 — header mark + hero art (presentation only) */
.brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 22%;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pratick-navy-muted);
    border: 1px solid rgba(139, 92, 246, 0.35);
}

html.light .brand-mark {
    background: var(--pratick-light-raised);
    border-color: rgba(139, 92, 246, 0.45);
}

.brand-mark img {
    width: 150%;
    height: 150%;
    object-fit: contain;
    pointer-events: none;
}

.brand-hero {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    margin-bottom: 2.5rem;
}

.brand-hero-art {
    width: min(100%, 280px);
    max-height: 220px;
    margin: 0 auto;
    object-fit: contain;
    pointer-events: none;
}

@media (min-width: 768px) {
    .brand-hero {
        grid-template-columns: minmax(0, 1fr) minmax(160px, 36%);
        text-align: left;
        gap: 2rem;
    }

    .brand-hero-art {
        width: 100%;
        max-height: 280px;
        margin: 0;
    }

    .brand-hero .theme-badge {
        margin-left: 0;
    }
}

.brand-nav a {
    text-decoration: none;
    transition: color 0.15s ease;
}

.brand-nav a:hover {
    color: var(--pratick-violet);
}

.brand-nav a[aria-current="page"] {
    color: var(--pratick-violet);
    font-weight: 600;
}

.brand-footer {
    border-color: var(--pratick-hairline);
}