/* NYCard brand layer — loaded after each layout's theme CSS. See brand/BRAND.md. */
:root {
    --nycard-navy: #0B172A;
    --nycard-blue: #0866F5;
    --nycard-blue-700: #0552C8;
    --nycard-blue-50: #EAF2FF;
    --nycard-slate: #51607A;
    --nycard-white: #FFFFFF;
    --nycard-font: 'Montserrat', Helvetica, sans-serif;
    --bs-font-sans-serif: var(--nycard-font);
    --bs-body-font-family: var(--nycard-font);
}

/* Two-tone wordmark rendered by <x-app-name> */
.nycard-wordmark {
    font-family: var(--nycard-font);
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}
.nycard-wordmark-ny { color: var(--nycard-navy); }
.nycard-wordmark-card { color: var(--nycard-blue); }
.nycard-wordmark--light .nycard-wordmark-ny { color: var(--nycard-white); }
.nycard-wordmark--light .nycard-wordmark-card { color: #4A8FF8; }
/* On an electric-blue surface the two-tone flips: Card goes white */
.nycard-wordmark--on-blue .nycard-wordmark-card { color: var(--nycard-white); }

/* Square logo mark next to the wordmark in landing headers */
.nycard-brand-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
}
.nycard-brand-logo--tile {
    background: var(--nycard-white);
    border-radius: 12px;
    padding: 5px;
}

/* Dark admin mode: navy "NY" would vanish on the dark sidebar */
[data-nycard-theme="dark"] .nycard-wordmark-ny { color: var(--nycard-white); }

::selection { background: var(--nycard-blue); color: var(--nycard-white); }

:focus-visible { outline: 2px solid var(--nycard-blue); outline-offset: 2px; }

/* Landing theme 2 hero: balanced headline; decorative accents only where there is room */
.hero-section h1 { text-wrap: balance; }
@media (max-width: 575px) {
    .hero-section .main-banner { display: none; }
}

/* Auth theme 2 floats the logo over a photo collage; dark admin sidebar is navy. Both need a white tile. */
.logo-container img,
[data-nycard-theme="dark"] .sidebar-app-logo {
    background: var(--nycard-white);
    border-radius: 14px;
    padding: 6px;
}
.logo-container img { box-shadow: 0 6px 20px rgba(11, 23, 42, 0.18); }