/* Challenger Quiz design system: every token, light and dark.
   Load before cq-components.css. Fonts resolve from ../fonts/.
   Dark mode follows the OS unless <html data-mode="light|dark"> is set. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* colour: light */
  --cq-bg: #f4f1ea;
  --cq-surface: #ffffff;
  --cq-surface-alt: #ece8de;
  --cq-border: #d9d4c8;
  --cq-border-strong: #77827b;
  --cq-ink: #1f3a32;
  --cq-ink-muted: #4d5c56;
  --cq-accent: #1f3a32;
  --cq-accent-ink: #b8391c;
  --cq-on-accent: #f4f1ea;
  --cq-accent-surface: #e4efe9;
  --cq-focus: #1f3a32;
  --cq-overlay-hover: #1f3a3214;
  --cq-overlay-press: #1f3a3229;
  --cq-accent-overlay-hover: #ffffff26;
  --cq-row-hover: #1f3a320f;
  --cq-scrim: #13241f66;
  --cq-danger: #a3193a;
  --cq-on-danger: #ffffff;
  --cq-success-ink: #0e6b57;
  --cq-success-surface: #e2f1ea;
  --cq-success-border: #1f8469;
  --cq-warning-ink: #7a5200;
  --cq-warning-surface: #fbf0d5;
  --cq-warning-border: #9e6c00;
  --cq-error-ink: #a3193a;
  --cq-error-surface: #fbe7ec;
  --cq-error-border: #a3193a;
  --cq-info-ink: #2a5a88;
  --cq-info-surface: #e6eef6;
  --cq-info-border: #2a5a88;
  --cq-chart-1: #cc4b28;
  --cq-chart-2: #4f3b9b;
  --cq-chart-3: #2b97ca;
  --cq-chart-4: #935d86;
  --cq-chart-5: #26795f;
  --cq-chart-hl-1: #cc4b28;
  --cq-chart-hl-2: #4f3b9b;
  --cq-chart-hl-3: #2b97ca;
  --cq-chart-hl-4: #935d86;
  --cq-chart-hl-5: #26795f;
  --cq-chart-context: #b7bfb9;
  --cq-chart-grid: #ece8de;
  --cq-chart-axis: #4d5c56;
  --cq-meter-track: #e6e1d5;
  --cq-meter-fill: #1f3a32;
  --cq-tooltip-bg: #ffffff;
  --cq-tooltip-ink: #1f3a32;
  --cq-tooltip-muted: #4d5c56;
  --cq-logo-board: #1f3a32;
  --cq-logo-dot: #ff6b4a;
  --cq-board: #1f3a32;
  --cq-board-ink: #f4f1ea;
  --cq-you: #cc4b28;
  --cq-you-surface: #fbe9e3;
  --cq-opponent: #2f6db0;
  --cq-opponent-surface: #e4edf8;
  --cq-done: #1b7a55;
  --cq-heat-1: #e9faf2;
  --cq-heat-2: #a2d0bd;
  --cq-heat-3: #66b094;
  --cq-heat-4: #26795f;
  --cq-heat-5: #175a45;
  --cq-heat-1-ink: #1f3a32;
  --cq-heat-2-ink: #1f3a32;
  --cq-heat-3-ink: #1f3a32;
  --cq-heat-4-ink: #f4f1ea;
  --cq-heat-5-ink: #f4f1ea;
  --cq-shadow-1: none;
  --cq-shadow-2: 0 6px 20px rgba(19, 36, 31, 0.16);
  --cq-shadow-3: 0 6px 18px rgba(19, 36, 31, 0.12);
  /* typography */
  --cq-font-sans: Manrope, "Segoe UI", system-ui, sans-serif;
  --cq-font-display: Manrope, "Segoe UI", system-ui, sans-serif;
  --cq-font-stat: "Barlow Condensed", "Arial Narrow", Manrope, sans-serif;
  --cq-font-num: Manrope, "Segoe UI", system-ui, sans-serif;
  --cq-num: tabular-nums lining-nums;
  --cq-weight-regular: 500;
  --cq-weight-strong: 700;
  --cq-weight-display: 800;
  --cq-weight-num-display: 600;
  --cq-text-xs: 12px;
  --cq-text-sm: 14px;
  --cq-text-md: 16px;
  --cq-text-lg: 18px;
  --cq-text-xl: 21px;
  --cq-text-2xl: 28px;
  --cq-text-3xl: 42px;
  --cq-lh-tight: 1.1;
  --cq-lh-snug: 1.3;
  --cq-lh-body: 1.5;
  --cq-tracking-label: 0.03em;
  --cq-tracking-display: -0.015em;
  --cq-label-case: none;
  --cq-label-size: 13px;
  /* spacing scale */
  --cq-space-1: 4px;
  --cq-space-2: 8px;
  --cq-space-3: 12px;
  --cq-space-4: 16px;
  --cq-space-5: 20px;
  --cq-space-6: 24px;
  --cq-space-7: 32px;
  --cq-space-8: 48px;
  /* density */
  --cq-control-h: 44px;
  --cq-row-h: 48px;
  --cq-cell-px: 12px;
  --cq-cell-py: 8px;
  --cq-card-pad: 16px;
  --cq-gap: 16px;
  --cq-page-pad: 16px;
  --cq-round-min: 160px;
  --cq-page-max-form: 640px;
  --cq-page-max: 1280px;
  --cq-control-sm-h: 36px;
  --cq-th-h: 38px;
  --cq-cell-edge: 14px;
  --cq-gap-tight: 12px;
  --cq-page-pad-wide: 32px;
  --cq-nav-h: 60px;
  /* radius */
  --cq-radius-sm: 6px;
  --cq-radius-md: 10px;
  --cq-radius-lg: 14px;
  --cq-radius-pill: 999px;
  --cq-radius-badge: 999px;
  /* borders and rules */
  --cq-border-w: 1px;
  --cq-card-border-w: 1px;
  --cq-card-rule-w: 0px;
  --cq-table-rule-w: 1px;
  --cq-zebra-bg: transparent;
  --cq-focus-w: 3px;
  --cq-focus-offset: 2px;
  /* motion */
  --cq-dur-fast: 90ms;
  --cq-dur-base: 160ms;
  --cq-dur-slow: 260ms;
  --cq-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --cq-ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --cq-ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --cq-press-scale: 0.97;
  --cq-lift: -2px;
  --cq-enter-shift: 6px;
  --cq-menu-scale: 0.98;
  /* component parts */
  --cq-th-bg: var(--cq-surface-alt);
  --cq-th-rule: var(--cq-border-strong);
  --cq-tab-ind-h: 3px;
  --cq-tab-ind-bg: var(--cq-accent-ink);
  --cq-tab-radius: 0px;
  --cq-tabs-bg: transparent;
  --cq-tabs-pad: 0px;
  --cq-tab-rail-w: 1px;
  --cq-tab-current-ink: var(--cq-ink);
  --cq-card-bg: var(--cq-surface);
  --cq-appbar-rule-w: 1px;
  --cq-appbar-rule: var(--cq-border);
  --cq-appbar-shadow: none;
  --cq-wordmark-font: var(--cq-font-display);
  --cq-wordmark-weight: 700;
  --cq-wordmark-size: 18px;
  --cq-seg-on-bg: var(--cq-accent);
  --cq-seg-on-ink: var(--cq-on-accent);
  /* chart.js theme (read by cq-chart-theme.js) */
  --cq-chart-hl-w: 3;
  --cq-chart-context-w: 1.25;
  --cq-chart-grid-dash: 0;
  --cq-chart-tension: 0;
  --cq-chart-font-size: 12;
  --cq-chart-label-weight: 700;
  --cq-chart-easing: easeOutQuart;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    color-scheme: dark;
    --cq-bg: #13241f;
    --cq-surface: #1f3a32;
    --cq-surface-alt: #274539;
    --cq-border: #33524a;
    --cq-border-strong: #83988f;
    --cq-ink: #f4f1ea;
    --cq-ink-muted: #a9bcb3;
    --cq-accent: #ff6b4a;
    --cq-accent-ink: #ff9479;
    --cq-on-accent: #13241f;
    --cq-accent-surface: #3a3a30;
    --cq-focus: #f4f1ea;
    --cq-overlay-hover: #f4f1ea14;
    --cq-overlay-press: #f4f1ea26;
    --cq-accent-overlay-hover: #ffffff38;
    --cq-row-hover: #f4f1ea0f;
    --cq-scrim: #000000a6;
    --cq-danger: #fc7182;
    --cq-on-danger: #2a0810;
    --cq-success-ink: #7ee8dc;
    --cq-success-surface: #173a2e;
    --cq-success-border: #5fcfc2;
    --cq-warning-ink: #f2c35e;
    --cq-warning-surface: #322a15;
    --cq-warning-border: #d9a63e;
    --cq-error-ink: #fc7182;
    --cq-error-surface: #3a1c25;
    --cq-error-border: #fc7182;
    --cq-info-ink: #93c3ff;
    --cq-info-surface: #1a2f40;
    --cq-info-border: #79b0f0;
    --cq-chart-1: #ff7a57;
    --cq-chart-2: #8de8f8;
    --cq-chart-3: #a371d3;
    --cq-chart-4: #0cad98;
    --cq-chart-5: #fbd509;
    --cq-chart-hl-1: #ff7a57;
    --cq-chart-hl-2: #8de8f8;
    --cq-chart-hl-3: #a371d3;
    --cq-chart-hl-4: #0cad98;
    --cq-chart-hl-5: #fbd509;
    --cq-chart-context: #557068;
    --cq-chart-grid: #2b483f;
    --cq-chart-axis: #a9bcb3;
    --cq-meter-track: #33524a;
    --cq-meter-fill: #f4f1ea;
    --cq-tooltip-bg: #1f3a32;
    --cq-tooltip-ink: #f4f1ea;
    --cq-tooltip-muted: #a9bcb3;
    --cq-logo-board: #f4f1ea;
    --cq-logo-dot: #ff6b4a;
    --cq-board: #274539;
    --cq-board-ink: #f4f1ea;
    --cq-you: #ff7a57;
    --cq-you-surface: #4a2f26;
    --cq-opponent: #7fb2f0;
    --cq-opponent-surface: #1f3552;
    --cq-done: #6ad6a4;
    --cq-heat-1: #122f25;
    --cq-heat-2: #1d5946;
    --cq-heat-3: #48987c;
    --cq-heat-4: #65bf9f;
    --cq-heat-5: #a2f2d3;
    --cq-heat-1-ink: #f4f1ea;
    --cq-heat-2-ink: #f4f1ea;
    --cq-heat-3-ink: #13241f;
    --cq-heat-4-ink: #13241f;
    --cq-heat-5-ink: #13241f;
    --cq-shadow-1: none;
    --cq-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
    --cq-shadow-3: 0 8px 22px rgba(0, 0, 0, 0.45);
  }
}

:root[data-mode="dark"] {
  color-scheme: dark;
  --cq-bg: #13241f;
  --cq-surface: #1f3a32;
  --cq-surface-alt: #274539;
  --cq-border: #33524a;
  --cq-border-strong: #83988f;
  --cq-ink: #f4f1ea;
  --cq-ink-muted: #a9bcb3;
  --cq-accent: #ff6b4a;
  --cq-accent-ink: #ff9479;
  --cq-on-accent: #13241f;
  --cq-accent-surface: #3a3a30;
  --cq-focus: #f4f1ea;
  --cq-overlay-hover: #f4f1ea14;
  --cq-overlay-press: #f4f1ea26;
  --cq-accent-overlay-hover: #ffffff38;
  --cq-row-hover: #f4f1ea0f;
  --cq-scrim: #000000a6;
  --cq-danger: #fc7182;
  --cq-on-danger: #2a0810;
  --cq-success-ink: #7ee8dc;
  --cq-success-surface: #173a2e;
  --cq-success-border: #5fcfc2;
  --cq-warning-ink: #f2c35e;
  --cq-warning-surface: #322a15;
  --cq-warning-border: #d9a63e;
  --cq-error-ink: #fc7182;
  --cq-error-surface: #3a1c25;
  --cq-error-border: #fc7182;
  --cq-info-ink: #93c3ff;
  --cq-info-surface: #1a2f40;
  --cq-info-border: #79b0f0;
  --cq-chart-1: #ff7a57;
  --cq-chart-2: #8de8f8;
  --cq-chart-3: #a371d3;
  --cq-chart-4: #0cad98;
  --cq-chart-5: #fbd509;
  --cq-chart-hl-1: #ff7a57;
  --cq-chart-hl-2: #8de8f8;
  --cq-chart-hl-3: #a371d3;
  --cq-chart-hl-4: #0cad98;
  --cq-chart-hl-5: #fbd509;
  --cq-chart-context: #557068;
  --cq-chart-grid: #2b483f;
  --cq-chart-axis: #a9bcb3;
  --cq-meter-track: #33524a;
  --cq-meter-fill: #f4f1ea;
  --cq-tooltip-bg: #1f3a32;
  --cq-tooltip-ink: #f4f1ea;
  --cq-tooltip-muted: #a9bcb3;
  --cq-logo-board: #f4f1ea;
  --cq-logo-dot: #ff6b4a;
  --cq-board: #274539;
  --cq-board-ink: #f4f1ea;
  --cq-you: #ff7a57;
  --cq-you-surface: #4a2f26;
  --cq-opponent: #7fb2f0;
  --cq-opponent-surface: #1f3552;
  --cq-done: #6ad6a4;
  --cq-heat-1: #122f25;
  --cq-heat-2: #1d5946;
  --cq-heat-3: #48987c;
  --cq-heat-4: #65bf9f;
  --cq-heat-5: #a2f2d3;
  --cq-heat-1-ink: #f4f1ea;
  --cq-heat-2-ink: #f4f1ea;
  --cq-heat-3-ink: #13241f;
  --cq-heat-4-ink: #13241f;
  --cq-heat-5-ink: #13241f;
  --cq-shadow-1: none;
  --cq-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
  --cq-shadow-3: 0 8px 22px rgba(0, 0, 0, 0.45);
}
