/* Humboldt Park Patriots brand override — loaded when BRAND=humboldt-park-patriots.
   Overrides the CSS variables defined in styles.css / display.css :root so the
   phone app and the big-screen display adopt the club's identity without
   touching the base stylesheets. This file and brands/humboldt-park-patriots/
   brand.js (colors, fonts) must be changed together.

   Palette sampled from the club's EPS: jersey red #cd202d, "Columbia blue"
   #b4def3, outline red #9e1d20, plus navy #0c2340 for text (contrast ratios are
   listed in brand.js).

   Fonts are all self-hosted, so the brand adds no font origin to the CSP:
   - Graduate (SIL OFL 1.1, see fonts/graduate/OFL.txt): varsity block display
     face, from this package's public/fonts/ at /brand/fonts/graduate/.
   - Inter: the shared woff2 under the repo's public/assets/fonts/ (the same
     file caesar and the CY display use) for body text.
   Both are preloaded by the server's branded HTML head. */

/* Graduate ships one weight. Declaring the face over the whole 100-900 range
   makes the browser use the real glyphs for bold headings instead of
   synthesising a smeared faux-bold. */
@font-face {
    font-family: 'Graduate';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/brand/fonts/graduate/graduate-v19-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-v20-latin-variable.woff2') format('woff2');
}

:root {
    --primary-color: #cd202d;       /* Jersey red */
    --background: #ffffff;
    --surface: #e8f4fb;             /* Columbia blue tint */
    --surface-dark: #b4def3;        /* Columbia blue */
    --text-primary: #0c2340;        /* Navy */
    --text-secondary: #45566e;
    --error-color: #9e1d20;         /* Outline red */
    --accent-gold: #cd202d;
    --wood-light: #b4def3;
    --wood-dark: #0c2340;
    --canvas-bg: #f4f9fd;
    --loading-bg: #0c2340;
    --shadow-warm: rgba(205, 32, 45, 0.18);
    --font-display: 'Graduate', 'Rockwell', 'Arial Black', Impact, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Chicago-flag motif: four red six-pointed stars, as on the HP emblem. */
    --hpp-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cdefs%3E%3Cpath id='s' fill='%23cd202d' d='M12,1L14.3,8.02L21.53,6.5L16.6,12L21.53,17.5L14.3,15.98L12,23L9.7,15.98L2.47,17.5L7.4,12L2.47,6.5L9.7,8.02Z'/%3E%3C/defs%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' x='32'/%3E%3Cuse href='%23s' x='64'/%3E%3Cuse href='%23s' x='96'/%3E%3C/svg%3E");
}

/* Varsity block lettering reads best slightly open, never tightened. */
.app-title,
.email-title,
.cta-title {
    letter-spacing: 0.02em;
}

/* =========================================
   Phone app — start screen
   ========================================= */

/* boothLogo lockup (emblem + name + "CARICATURE BOOTH"), injected by app.js. */
.booth-logo-frame {
    margin: 0 auto 1.25rem;
    width: 90%;
    max-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.booth-script-logo {
    width: 100%;
    height: auto;
    display: block;
}

.booth-brand-logo-img {
    height: 28px;
    width: auto;
    vertical-align: middle;
}

/* The thin divider under the title becomes the four-star band. */
.booth-divider {
    width: 120px;
    height: 24px;
    background: var(--hpp-stars) no-repeat center / contain;
    border-radius: 0;
    margin: 0 auto 1.75rem;
}

/* Jersey-style primary button: red with a Columbia-blue edge, shadow in red. */
.primary-btn {
    box-shadow: 0 0 0 3px var(--surface-dark), 0 6px 16px rgba(205, 32, 45, 0.3);
}

.primary-btn:active,
#camera-screen .primary-btn {
    box-shadow: 0 0 0 3px var(--surface-dark), 0 3px 8px rgba(205, 32, 45, 0.3);
}

/* =========================================
   Big-screen display (grid layout, public/display.html in this package)
   ========================================= */

/* Columbia-blue side stripe behind the CTA + QR column. */
.gallery-sidebar {
    background: var(--surface);
    border-left: 6px solid var(--surface-dark);
    border-radius: 12px;
    padding: 24px 16px;
}

.cta-section::before {
    content: '';
    display: block;
    width: 120px;
    height: 24px;
    margin: 0 auto 16px;
    background: var(--hpp-stars) no-repeat center / contain;
}

.cta-title {
    color: var(--primary-color);
}

/* Navy branding bar with a red top rule: the emblem and the white club name
   carry it (red text is never set on navy — 2.89:1). */
.branding-bar {
    background: var(--text-primary);
    border-top: 4px solid var(--primary-color);
}

.hpp-branding-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-transform: uppercase;
}

@media (min-width: 1920px) {
    .hpp-branding-name {
        font-size: 1.4rem;
    }
}