/*
 * Theme Variables
 *
 * Change these values to reskin the application for different clients.
 * No color words are used in variable names - they describe purpose, not appearance.
 *
 * Brand: P.S. Vote, using the Invite Every Voter campaign brand of Vote Rev Action Fund
 * (brand guide, Sept 2024). Vote Rev Blue and White are used the most, then Soft Pink,
 * Accessible Tangerine and Emoji Yellow; Raspberry, Accent Orange, Pale Pink and Black
 * only sparingly. Flat look: no drop shadows.
 * Readable text pairs (WCAG AA, from the guide): white, tangerine or yellow text on blue;
 * blue text on white, tangerine, yellow, soft pink or pale pink. Accent Orange is never
 * a text color (hearts and emoji only).
 * Fonts: Jost (headings, buttons) + Epilogue (body text, labels), loaded from Google
 * Fonts in templates/base.html.twig. Fallbacks from the guide: Trebuchet MS and Arial.
 */

:root {
    /* Brand palette */
    --brand-blue: #19039E;          /* Vote Rev Blue */
    --brand-blue-deep: #110270;     /* darker blue for hover states (not in the guide) */
    --brand-soft-pink: #F8BAD1;
    --brand-pale-pink: #FFE1EB;
    --brand-tangerine: #FF6623;     /* Accessible Tangerine */
    --brand-yellow: #FFD939;        /* Emoji Yellow */
    --brand-yellow-deep: #FFC800;   /* hover/pressed yellow (not in the guide) */
    --brand-raspberry: #D30C53;
    --brand-orange: #FF4E00;        /* Accent Orange: hearts and emoji only, never text */
    --brand-black: #000000;

    /* Primary colors */
    --color-primary: var(--brand-blue);
    --color-primary-dark: var(--brand-blue-deep);
    --color-accent: var(--brand-yellow);
    --color-accent-hover: var(--brand-yellow-deep);
    --color-highlight: var(--brand-tangerine);   /* small decorative accents: bars, stickers */

    /* Background colors */
    --color-bg: #FFF;
    --color-bg-subtle: var(--brand-pale-pink);
    --color-bg-muted: var(--brand-pale-pink);
    --color-bg-overlay: rgba(15, 15, 15, 0.8);
    --color-bg-overlay-light: rgba(15, 15, 15, 0.5);

    /* Homepage sections */
    --color-hero-bg: var(--brand-blue);
    --color-hero-text: #FFF;
    --color-section-alt: var(--brand-pale-pink);
    --color-section-fun: var(--brand-yellow);
    --color-section-dark: var(--brand-blue);
    --color-section-dark-accent: var(--brand-yellow);
    --color-panel-fun: var(--brand-soft-pink);   /* boxes: sweepstakes, "most friends" note */
    --dots-on-dark: rgba(255, 255, 255, 0.16);   /* halftone dot texture */
    --dots-on-light: rgba(25, 3, 158, 0.12);

    /* Text colors */
    --color-text: var(--brand-blue);
    --color-text-inverse: #FFF;
    --color-text-muted: #4D3FB2;   /* lighter blue, still AA on white, the pinks and yellow */
    --color-link: var(--brand-blue);

    /* UI colors */
    --color-border: var(--brand-blue);
    --color-line: var(--brand-soft-pink);        /* thin dividers, inactive outlines */
    --color-progress-bg: var(--brand-soft-pink);
    --color-slideover-bg: var(--brand-pale-pink);
    --color-focus-ring: var(--brand-tangerine);

    /* Shapes */
    --btn-border-radius: 12px;
    --btn-border-radius-lg: 14px;
    --radius-card: 20px;
    --radius-chip: 999px;
    --radius-bubble: 16px;         /* chat-bubble shapes from the brand */

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --page-gutter: 1.25rem;

    /* Typography */
    --font-family: 'Epilogue', Arial, sans-serif;
    --font-family-heading: 'Jost', 'Trebuchet MS', sans-serif;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;

    /* Postcard preview component (templates/components/postcard_preview.html.twig) */
    --postcard-bg: var(--brand-blue);
    --postcard-text: #FFF;
    --postcard-highlight: var(--brand-yellow);
    --postcard-photo-border: #FFF;
}