/* Polls & Insights design tokens. Source: design/Polls & Insights Branded Concept.html */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* brand */
  --csa-navy: #17406c;
  --csa-primary: #0077cc;
  --csa-primary-hover: #0069b4;
  --csa-primary-active: #005fa3;
  --csa-accent: #00a2ff;
  --csa-accent-soft: #99d7ff;

  /* text */
  --csa-ink: #101828;
  --csa-text-2: #344054;
  --csa-muted: #475467;
  --csa-on-navy-muted: #d2e1f0;

  /* surfaces */
  --csa-white: #ffffff;
  --csa-page: #f4faff;
  --csa-tint: #e9f6ff;
  --csa-tint-strong: #e1f1ff;
  --csa-tint-cool: #eef4fa;
  --csa-bar: #e2ebf3;

  /* borders */
  --csa-border: #d5e3ef;
  --csa-border-strong: #bfd3e4;
  --csa-divider: #e6eef5;

  /* status */
  --csa-danger: #9c2f12;
  --csa-danger-tint: #fdf1ee;

  /* type: families */
  --csa-font-display: "Inter", system-ui, sans-serif;
  --csa-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* type: sizes */
  --csa-text-2xs: 12px;
  --csa-text-xs: 13px;
  --csa-text-sm: 14px;
  --csa-text-md: 15px;
  --csa-text-base: 16px;
  --csa-text-lg: 18px;
  --csa-text-xl: 20px;
  --csa-text-2xl: 22px;
  --csa-text-3xl: 26px;
  --csa-text-4xl: 32px;
  --csa-text-5xl: 40px;
  --csa-text-display: 68px;

  /* type: weights */
  --csa-weight-regular: 400;
  --csa-weight-medium: 500;
  --csa-weight-bold: 700;
  --csa-weight-heavy: 800;

  /* type: line heights */
  --csa-leading-tight: 1.1;
  --csa-leading-snug: 1.2;
  --csa-leading-normal: 1.5;
  --csa-leading-relaxed: 1.6;

  /* type: letter spacing */
  --csa-tracking-tight: -0.02em;
  --csa-tracking-snug: -0.01em;
  --csa-tracking-wide: 0.05em;
  --csa-tracking-eyebrow: 0.08em;

  /* shape */
  --csa-radius-sm: 8px;
  --csa-radius: 10px;
  --csa-radius-md: 12px;
  --csa-radius-lg: 16px;
  --csa-radius-xl: 20px;
  --csa-radius-2xl: 24px;
  --csa-radius-pill: 999px;
  --csa-border-w: 1.5px;

  /* control heights (A11Y-02: primary controls >= 48px, touch targets >= 44px) */
  --csa-control-height: 48px;
  --csa-control-height-sm: 40px;
  --csa-touch-target: 44px;

  /* spacing: 4px scale, used for all padding, margin and gap */
  --csa-space-1: 4px;
  --csa-space-2: 8px;
  --csa-space-3: 12px;
  --csa-space-4: 16px;
  --csa-space-5: 20px;
  --csa-space-6: 24px;
  --csa-space-7: 28px;
  --csa-space-8: 32px;
  --csa-space-9: 36px;
  --csa-space-10: 40px;
  --csa-space-11: 44px;
  --csa-space-16: 64px;

  /* layout */
  --csa-gutter: var(--csa-space-16);
  --csa-max-width: 1440px;
  /* side rail (e.g. Latest insights); the main column is whatever remains */
  --csa-rail-width: 360px;
  --csa-rail-gap: var(--csa-space-10);
  /* max line length for running text; ch scales with the font size */
  --csa-measure: 68ch;
}

@media (max-width: 768px) {
  :root {
    --csa-gutter: var(--csa-space-5);
  }
}