/* MIDTERMS DESIGN TOKENS
   Primitive palettes → semantic roles → typography/spacing → exact components.
   Keep the browser's root font size. 1rem = 16px only at the browser default.
   Reference artwork geometry is not part of the general-purpose spacing scale. */
:root {
  /* 1. Primitive palette: Polykit brand plus the approved Figma neutrals. */
  --brand-blue-light: #2e5cff;
  --brand-blue-dark: #3262ff;
  --brand-blue-light-hover: color-mix(in srgb, var(--brand-blue-light) 90%, white);
  --brand-blue-dark-hover: color-mix(in srgb, var(--brand-blue-dark) 92%, black);
  --palette-white: #fff;
  --palette-black: #000;
  --palette-ink: #25272a;
  --palette-muted: #6b727b;
  --palette-paper: #f5f5f5;
  --palette-surface-soft: #f7f7f7;
  --palette-grouped-light: #f4f5f7;
  --palette-line-light: #e2e4e8;
  --palette-text-inverse: #f5f6f8;
  --palette-secondary-inverse: #b6bbc4;
  --palette-muted-inverse: #999ea7;
  --palette-line-dark: #2d3037;
  --palette-field-dark: #21242b;
  --palette-surface-dark: #1c1f27;
  --palette-panel-dark: #15181e;
  --palette-canvas-dark: #0c0e13;
  --palette-photo-background: #e9e9e7;

  /* 2. Semantic roles. Data colours are independent of action colours. */
  --color-canvas: var(--palette-white);
  --color-surface: var(--palette-surface-soft);
  --color-panel: var(--palette-white);
  --color-paper: var(--palette-paper);
  --color-text-primary: var(--palette-ink);
  --color-text-secondary: var(--palette-muted);
  --color-border: var(--palette-line-light);
  --color-glass: rgb(255 255 255 / 67%);
  --color-action: var(--brand-blue-light);
  --color-action-hover: var(--brand-blue-light-hover);
  --color-focus: var(--color-text-secondary);
  --color-hero-input: #e9ecf1;
  --color-hero-input-border: #c7cdd7;
  --color-hero-input-placeholder: #59616e;
  --color-live: #d90132;
  --color-error-inverse: #ff8ea4;
  --color-error-inverse-text: #ffadc0;
  --color-editorial-blue: #2940c7;
  --color-editorial-purple: #612b94;
  --color-editorial-red: #bd0a38;
  /* Polymarket US Midterms data palette. Shader artwork retains its own palette. */
  --color-market-dem-label: #2258f8;
  --color-market-rep-label: #d40132;
  --color-market-dem-strong: #2258f8;
  --color-market-dem-likely: #7a9bfb;
  --color-market-dem-lean: #c9d6fb;
  --color-market-tossup: #fbde83;
  --color-market-rep-lean: #e5b7c2;
  --color-market-rep-likely: #e56784;
  --color-market-rep-strong: #d40132;
  --color-market-no-race: #a0a3b1;
  --color-market-unavailable: var(--color-market-no-race);

  /* Existing CSS and JavaScript compatibility aliases. */
  --canvas: var(--color-canvas);
  --surface: var(--color-surface);
  --panel: var(--color-panel);
  --paper: var(--color-paper);
  --glass: var(--color-glass);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --line: var(--color-border);
  --blue: var(--color-action);
  --gutter: var(--layout-gutter);

  /* 3. Typeface and type scale. Keep the approved SF Pro implementation. */
  --font-body: SF, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-display: var(--font-body);
  --font-brand: 'Inter PM', var(--font-body);
  --font-market: var(--font-brand);
  --font-tally: 'Instrument Sans PM Condensed', var(--font-display);
  --font-credits: 'DIN Condensed', var(--font-display);
  --font-display-axes: 'wdth' 60, 'wght' 760;
  --font-kicker-axes: 'wdth' 60, 'wght' 650;
  --font-body-axes: 'wdth' 100, 'wght' 400;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 760;
  --text-micro: 0.5625rem;
  --text-xs: 0.625rem;
  --text-annotation: 0.6875rem;
  --text-caption: 0.75rem;
  --text-label: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-title: 1.5rem;
  --text-title-md: 1.75rem;
  --text-title-lg: 2rem;
  --text-display-sm: 3rem;
  --text-display-md: 4rem;
  --text-display-lg: 5rem;
  --display-section-size: clamp(3rem, 5.556vw, 5rem);
  --leading-display-tight: 0.8;
  --leading-display: 0.82;
  --leading-display-relaxed: 0.85;
  --leading-heading-tight: 0.9;
  --leading-heading: 0.95;
  --leading-compact: 1.2;
  --leading-body-tight: 1.3;
  --leading-body: 1.4;
  --leading-reading: 1.5;

  /* 4. Spacing: 4px base, with named half-steps used in the reference. */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-4-5: 1.125rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --layout-page-max: 90rem;
  --layout-content-max: 90rem;
  --layout-reading-max: 128rem;
  --layout-art-ui-unit: 1px;
  --layout-gutter: clamp(1.5rem, 5.556vw, 5rem);
  --section-space-block: 4rem;

  /* 5. Shape, control targets, focus and motion. */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-pill: 3rem;
  --radius-round: 999px;
  --control-hit-size: 2.75rem;
  --focus-width: 2px;
  --focus-offset: 2px;
  --duration-fast: 180ms;
  --duration-normal: 200ms;
  --duration-fade: 400ms;
  --duration-slow: 600ms;
  --duration-carousel: 1000ms;
  --duration-data: 900ms;
  --duration-live-pulse: 2400ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: ease-out;

  /* 6. Exact component dimensions: do not round reference artwork coordinates. */
  --hero-height: 60.875rem;
  --hero-story-width: 15.75rem;
  --hero-story-title-size: 3.0540625rem;
  --hero-story-title-leading: 0.8;
  --hero-story-title-tracking: -0.080575rem;
  --hero-story-title-line-gap: 0.218125rem;
  /* Figma 288:26501/26502: the first line has an additional 50% black fill. */
  --hero-title-gradient: linear-gradient(90deg, rgb(0 0 0 / 50%), rgb(102 102 102 / 50%));
  --hero-title-underlay: linear-gradient(90deg, rgb(0 0 0 / 50%), rgb(0 0 0 / 50%));
  --hero-eyebrow-gap: 0.208rem;
  --hero-live-icon-size: 0.644875rem;
  --hero-rsvp-top: 28.4375rem;
  --hero-rsvp-min-height: 30.9375rem;
  --hero-rsvp-top-tablet: 21.25rem;
  --hero-rsvp-min-height-tablet: 29.375rem;
  --schedule-card-width: clamp(28.75rem, 44vw, 37.875rem);
  --experience-artboard-width: 414.667;
  --experience-visual-height: 21.375rem;
  --lineup-rail-max-width: 1442px;
  --lineup-hero-height: 284px;
  --lineup-nameplate-width: 388px;
  --lineup-name-size-fallback: 38px;
  --lineup-effect-fade: 650ms;
  --lineup-photo-fade: 450ms;
  --signup-dialog-width: 20.4545625rem;
  --signup-dialog-padding: 1.4318125rem;
  --signup-dialog-radius: 1.02275rem;
  --signup-text-body: 0.7159375rem;
  --signup-text-heading: 1.636375rem;
  --signup-text-display: 2.4545625rem;
  --signup-text-control: 0.7670625rem;
  --signup-text-small: 0.66475rem;
  --signup-text-caption: 0.613625rem;
}

[data-theme='dark'] {
  --color-canvas: var(--palette-canvas-dark);
  --color-surface: var(--palette-surface-dark);
  --color-panel: var(--palette-panel-dark);
  --color-paper: var(--palette-surface-dark);
  --color-text-primary: var(--palette-text-inverse);
  --color-text-secondary: var(--palette-muted-inverse);
  --color-border: var(--palette-line-dark);
  --color-glass: rgb(12 14 19 / 74%);
  --color-action: var(--brand-blue-dark);
  --color-action-hover: var(--brand-blue-dark-hover);
  --color-hero-input: #2b303a;
  --color-hero-input-border: #535c6d;
  --color-hero-input-placeholder: #c1c7d2;
  --hero-title-gradient: linear-gradient(90deg, rgb(255 255 255 / 82%), rgb(219 219 219 / 62%));
  --hero-title-underlay: linear-gradient(90deg, rgb(255 255 255 / 50%), rgb(255 255 255 / 50%));
  /* Official US market-row accents for readable dark labels; geographic tiers
     retain the fixed US Midterms palette above. */
  --color-market-dem-label: #0073ff;
  --color-market-rep-label: #e92150;
  --color-market-no-race: #89919f;
}

/* Component spacing preserves the measured reference values at each breakpoint.
   These roles intentionally do not round artwork-adjacent UI to the base scale. */
:root {
  /* styles.css: exact reference spacing. */
  --button-padding: 0.9375rem var(--space-5);
  --kicker-margin-bottom: 1.0625rem;
  --section-intro-margin-top: 1.375rem;
  --nav-padding: var(--space-3) 0.9375rem;
  --brands-gap: 0.8125rem;
  --nav-actions-gap: 0.8125rem;
  --countdown-value-margin-left: 0.3125rem;
  --country-gap: 0.3125rem;
  --nav-register-padding: var(--space-2) 1.0625rem;
  --hero-title-margin-top: 1.550875rem;
  --hero-credits-margin-top: 6.553625rem;
  --partner-symbols-gap: 0.8125rem;
  --credits-gap: 1.625rem;
  --credits-margin-top: 3.625rem;
  --credits-label-margin-bottom: 1.5625rem;
  --rsvp-padding: 2.1rem;
  --rsvp-gap: 1.375rem;
  --date-pill-gap: 0.5625rem;
  --date-pill-padding: 0.8125rem 1.1875rem;
  --signup-form-gap: 0.6875rem;
  --phone-input-padding: 0.625rem 0;
  --small-links-gap: 2.4375rem;
  --rsvp-legal-offset: 0.211875rem;
  --closing-legal-offset: 0.24625rem;
  --senate-labels-padding: 0 0.5866875rem;
  --senate-bar-gap: 0.0978125rem;
  --senate-bar-margin: 0.1955625rem 0;
  --senate-footer-padding: 0 0.5866875rem;
  --lineup-padding: 1.875rem 0 var(--space-16);
  --lineup-gap: 2.625rem;
  --lineup-nameplate-padding: 1.0625rem 0.875rem;
  --lineup-bottom-gap: 0.9375rem;
  --community-gap: 0.625rem;
  --avatar-margin-left: -0.5625rem;
  --schedule-card-padding: 1.3125rem;
  --besties-gap: 0.1875rem;
  --schedule-copy-padding: 0.1875rem 0 var(--space-0-5);
  --session-time-margin-left: 0.3125rem;
  --faq-gap: clamp(3.125rem, 8.6vw, 9.6875rem);
  --faq-item-padding: 1.6875rem;
  --closing-offer-margin-top: 0.875rem;
  --footer-padding: 1.375rem var(--gutter);
  --footer-gap: 2.1875rem;
  --footer-links-gap: 0.9375rem;
  --dialog-button-gap: 0.875rem;
  --text-button-padding: 0.625rem;
  --hero-credits-margin-top-above-1500: 7.28vw;
  --credits-margin-top-above-1500: 4vw;
  --lineup-padding-top-above-1500: 1.875rem;
  --hero-credits-margin-top-below-1100: 3.4375rem;
  --credits-gap-below-1100: 0.9375rem;
  --credits-margin-top-below-1100: 2.1875rem;
  --rsvp-padding-below-1100: 1.625rem;
  --faq-gap-below-1100: 3.75rem;
  --kicker-margin-bottom-below-800: 0.9375rem;
  --nav-padding-below-800: 0.625rem var(--space-3);
  --nav-margin-bottom-below-800: 2.8125rem;
  --nav-register-padding-below-800: 0.5625rem 0.8125rem;
  --hero-story-padding-below-800: 0.625rem var(--space-5) 2.375rem;
  --date-pill-padding-below-800: 0.6875rem 0.9375rem;
  --offer-margin-top-below-800: 0.875rem;
  --small-links-gap-below-800: 0.625rem;
  --senate-padding-below-800: 2.125rem 0.625rem 0.9375rem;
  --lineup-controls-gap-below-800: 0.625rem;
  --lineup-controls-padding-below-800: 0 0.9375rem;
  --lineup-nameplate-padding-below-800: 0.9375rem 0.4375rem;
  --lineup-bottom-gap-below-800: 0.9375rem;
  --schedule-card-padding-below-800: 0.875rem;
  --schedule-card-gap-below-800: 0.9375rem;
  --session-heading-margin-bottom-below-800: 0.4375rem;
  --schedule-end-margin-top-below-800: 1.875rem;
  --schedule-end-padding-below-800: 0.9375rem 0;
  --experience-gap-below-800: 1.875rem;
  --stage-photo-margin-left-below-800: -0.5rem;
  --experience-heading-margin-bottom-below-800: 0.625rem;
  --faq-item-padding-below-800: 1.375rem 0;
  --faq-answer-padding-right-below-800: 0.9375rem;
  --faq-answer-margin-top-below-800: 0.9375rem;
  --closing-margin-below-800: 0 var(--space-3) 0.625rem;
  --closing-content-gap-below-800: 1.5625rem;
  --closing-content-padding-below-800: 1.375rem;
  --footer-padding-below-800: 1.625rem var(--space-6);
  --footer-gap-below-800: 1.375rem;
  --dialog-padding-below-800: 1.875rem var(--space-6);
  --success-brands-margin-bottom-below-800: 1.875rem;
  --senate-bar-gap-below-800: 0.06875rem;
  --schedule-heading-margin-bottom: 2.8125rem;
  --senate-label-gap: 0.391125rem;

  /* lineup.css: exact reference spacing. */
  --lineup-tba-title-padding: 0.625rem var(--space-4) 0;
  --lineup-tba-label-padding: 0 0.625rem var(--space-2);
  --carousel-playback-gap: 0.4375rem;
  --carousel-playback-padding: var(--space-1-5) 0.625rem;
  --lineup-nameplate-padding-below-600: 0.875rem 0.3125rem;

  /* review-polish.css: exact reference spacing. */
  --countdown-value-padding: var(--space-2) 0.6875rem;
  --theme-toggle-padding: 0.4375rem;
  --nav-actions-gap-below-1100: 0.4375rem;
  --theme-toggle-padding-below-800: 0.3125rem;

  /* experience.css: exact reference spacing. */
  --experience-introduction-gap: 1.546875rem;
  --experience-calls-panel-padding: 1.3125rem var(--space-4-5) var(--space-4);
  --experience-panel-heading-margin-bottom: 1.5625rem;
  --experience-bestie-label-margin-top: 0.4375rem;
  --experience-panel-foot-padding-top: 0.875rem;
  --experience-guests-panel-gap: 0.625rem;
  --experience-guest-copy-padding: 0.6875rem var(--space-3) 0.8125rem;
  --experience-calls-panel-padding-tablet: 0.8125rem 0.625rem;
  --experience-panel-heading-margin-bottom-tablet: 0.875rem;
  --experience-panel-foot-padding-top-tablet: 0.5625rem;

  /* map-motion.css: exact reference spacing. */
  --schedule-motion-card-padding: clamp(var(--space-4), 1.46vw, 1.3125rem);
  --schedule-card-gap: clamp(0.875rem, 1.39vw, var(--space-5));
  --schedule-end-gap: 0.4375rem;
  --schedule-end-button-padding: 0.6875rem 1.375rem;

  /* signup-flow.css: exact reference spacing. */
  --signup-brand-gap: 0.7159375rem;
  --signup-description-margin: 0.4090625rem 0 0;
  --signup-dialog-form-gap: 0.613625rem;
  --signup-primary-padding: 0.625rem var(--space-3);
  --signup-phone-field-gap: 0.511375rem;
  --signup-phone-field-padding: 0 0.8181875rem;
  --signup-country-gap: 0.3068125rem;
  --signup-divider-gap: 0.613625rem;
  --signup-divider-margin: 0.4090625rem 0;
  --signup-social-gap: 0.613625rem;
  --signup-legal-margin: 0.4375rem 0 0;
  --signup-back-padding: var(--space-1) 0.7159375rem;
  --signup-code-input-padding: 0.3068125rem var(--space-1);
  --signup-status-margin: 0.4375rem 0 0;
  --signup-phone-content-padding-top: 1.840875rem;
  --signup-phone-description-margin-top: 0.715875rem;
  --signup-phone-form-margin-top: 0.613625rem;
  --signup-code-shell-gap: 3.6818125rem;
  --signup-code-content-gap: 0.613625rem;
  --signup-code-form-gap: 0.8181875rem;
  --signup-code-form-margin-top: 0.2045625rem;
  --signup-demo-note-margin-top: 0.875rem;
  --signup-success-shell-gap: 2.625rem;
  --signup-success-content-gap: 1.02275rem;
  --signup-qr-row-gap: 1.02275rem;
  --signup-qr-padding: 0.613625rem;
  --signup-success-actions-gap: 0.511375rem;
  --signup-link-options-gap: 0.511375rem 0.875rem;
  --signup-instructions-gap: 0.4090625rem;
  --signup-instruction-item-gap: 0.511375rem;
  --signup-email-form-gap: 0.3125rem;
  --signup-email-row-gap: 0.4375rem;
  --signup-email-form-button-padding: 0.4375rem 0.625rem;
  --signup-success-shell-gap-below-600: 2.625rem;
}

/* Wide displays use the available canvas. Artwork coordinates and interface
   sizes grow together until controls reach their bounded desktop size. */
@media (min-width: 1441px) {
  :root {
    --layout-art-ui-unit: clamp(1px, 0.0694444444vw, 1.5px);
    --layout-gutter: clamp(5rem, 5.556vw, 9rem);
    --section-space-block: clamp(4rem, 4.444vw, 6rem);
    --display-section-size: clamp(5rem, 5.556vw, 6.5rem);
  }
}