/**
 * Vote with Pride design tokens (plugin 1.8.2; layout widths and the title band 1.9.0). Loaded FIRST of the plugin's stylesheets (VWP_Design::enqueue_tokens);
 * every other plugin sheet reads these. Values only: no selectors beyond :root and the two Poppins faces.
 * The look is the site header's (vwp-nav.css): navy, the indigo→violet→magenta gradient, the pride stripe, Poppins
 * headings, Open Sans text.
 */

/* Poppins is bundled with the plugin (no Google Fonts request). vwp-nav.css declares the same two faces; the URL is
   identical, so the browser fetches each file once. Declared here too so headings keep Poppins if the header is off. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(../../assets/fonts/poppins-600-latin.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(../../assets/fonts/poppins-700-latin.woff2) format("woff2"); }

:root {
    /* navy (header, footer, dark callouts) */
    --navy-900: #0f172a;
    --navy-800: #141d33;
    --navy-700: #1e293b;

    /* brand */
    --grad: linear-gradient(135deg, #4f46e5, #7c3aed 50%, #c026d3);   /* white text passes 4.5:1 on every stop */
    --pride: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #24408e, #732982, #e40303);
    --pride-flat: linear-gradient(90deg, #e40303 0 16.66%, #ff8c00 0 33.33%, #ffed00 0 50%, #008026 0 66.66%, #24408e 0 83.33%, #732982 0);
    --accent: #4f46e5;
    --accent-ink: #3730a3;      /* links and accent text: 9.6:1 on white, 8.2:1 on --accent-50 */
    --accent-50: #eef0ff;
    --accent-100: #e0e3ff;

    /* ink and surfaces */
    --ink-1: #0f172a;           /* headings, primary text */
    --ink-2: #334155;           /* body text: 10.4:1 on white */
    --ink-3: #64748b;           /* meta text on white / --surface only: 4.76:1 */
    --ink-3-tint: #475569;      /* meta text on the page background or a tinted panel (#64748b drops to 4.4:1 there) */
    --line: #e6e8f0;
    --line-strong: #cbd5e1;     /* field borders */
    --bg: #f4f6fb;              /* the one page background */
    --surface: #fff;
    --surface-2: #f8fafc;       /* inset panels inside a card */

    /* record tints (text / background) */
    --pro: #047857;   --pro-bg: #ecfdf5;   --pro-bar: #10b981;
    --anti: #b91c1c;  --anti-bg: #fef2f2;  --anti-bar: #ef4444;
    --watch: #a16207; --watch-bg: #fefce8; --watch-bar: #f59e0b;
    --info: var(--accent-ink); --info-bg: var(--accent-50);

    /* focus: the header's amber */
    --focus: #ffb703;

    /* type */
    --font-head: "Poppins", "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-band: 40px; --lh-band: 46px;   /* the page-title band's <h1> (1.9.0); whole-pixel line height */
    --fs-h1: 34px; --lh-h1: 1.15;
    --fs-h2: 24px; --lh-h2: 1.25;
    --fs-h3: 19px; --lh-h3: 1.3;
    --fs-h4: 16px; --lh-h4: 1.35;
    --fs-body: 17px; --lh-body: 1.65;
    --fs-small: 15px; --lh-small: 1.55;
    --fs-meta: 13px; --lh-meta: 1.5;
    --fs-label: 12px;

    /* shape and depth */
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
    --shadow-1: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 16px rgba(15, 23, 42, .06);
    --shadow-2: 0 10px 30px rgba(15, 23, 42, .12);
    --glow: 0 6px 18px rgba(99, 102, 241, .35);
    --ease: cubic-bezier(.2, .8, .2, 1);

    /* controls */
    --ctl-md: 44px;
    --ctl-sm: 34px;
    --field-h: 48px;

    /* layout (1.9.0): the header bar's container is the page's edge. Two content widths, both starting at that edge:
       wide (lists, ballot, bills, profiles, results) and reading (text pages, forms, Deadlines, How we rate, 404). */
    --w-shell: 1240px;                                   /* the header bar (vwp-nav.css .vn-bar), gutters included */
    --gutter: 24px;                                      /* its side padding: 18px under 1240px, 16px under 1024px */
    --w-wide: calc(var(--w-shell) - 2 * var(--gutter));  /* 1192px */
    --w-read: 740px;

    /* the page-title band (under the header, every page but the home page) */
    --band-bg: var(--navy-900);                          /* the header's bottom colour: no seam */
    --band-ink: #fff;                                    /* 17.9:1 on --navy-900 */
    --band-muted: #c3cbd8;                               /* 11.3:1: eyebrow, subline, back link */
    --band-eyebrow: #c7c9ff;                             /* the header's link lilac: 11.0:1 */
}
@media (max-width: 1239px) {
    :root { --gutter: 18px; }
}
@media (max-width: 1023px) {
    :root { --gutter: 16px; }
}
@media (max-width: 767px) {
    :root { --fs-h1: 28px; --fs-band: 29px; --lh-band: 34px; }
}