/* UI refinement follows unslop by Damir Sokolovsky (@heydamir), CC BY 4.0.
   https://github.com/heydamir/unslop */
/* Range Console — Paper & Ink tokens.
   Poster language inspired by tactical shooters; no Riot typeface, logo or
   in-game layout is copied. Display faces are self-hosted OFL with a separate
   Vietnamese subset so diacritics never fall back to a different family. */

@font-face {
  font-family: 'Range Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/anton-vietnamese-400.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Range Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/anton-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Range Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/saira-condensed-vietnamese-600.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Range Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/saira-condensed-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Range Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/saira-condensed-vietnamese-700.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Range Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/saira-condensed-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* Gaming display family selected through UI UX Pro Max, with Vietnamese parity. */
@font-face {
  font-family: 'ValoX Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/chakra-petch-vietnamese-600.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'ValoX Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/chakra-petch-latin-600.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: 'ValoX Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/chakra-petch-vietnamese-700.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'ValoX Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/chakra-petch-latin-700.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 {
  /* Reference palette. The live theme maps these colours onto surface roles. */
  --rc-paper: #ece8e1;
  --rc-paper-sunk: #e3ded5;
  --rc-paper-raise: #f7f4ee;
  --rc-ink: #0f1923;
  --rc-ink-soft: #1b2733;
  --rc-slate: #5a6672;
  --rc-rule: #c9c2b6;
  --rc-rule-strong: #9d9689;
  --rc-signal: #ff4655;
  --rc-signal-hover: #ff5c68;
  --rc-signal-text: #c4243a;
  --rc-on-signal: #141a20;
  --rc-ice: #0e7c93;
  --rc-ocean: #3b9cff;
  --rc-ocean-hover: #64b2ff;
  --rc-ocean-text: #185fa8;
  --rc-danger: #c4243a;

  --rc-night: #090d12;
  --rc-night-2: #111923;
  --rc-night-3: #1c2d40;
  --rc-night-rule: #2a3641;
  --rc-night-rule-strong: #52616d;
  --rc-night-text: #ece8e1;
  --rc-night-text-soft: #ccd6de;
  --rc-night-muted: #a7b3be;
  --rc-night-signal-text: #79bbff;
  --rc-night-ice: #83c5ff;
  --rc-night-danger: #ff8a78;
  --rc-color-scheme: light;
  --rc-selection-fill: var(--rc-ink);
  --rc-selection-text: var(--rc-paper-raise);

  --rc-font-display: 'Range Display', 'Range Condensed', 'Arial Narrow', system-ui, sans-serif;
  --rc-font-condensed: 'Range Condensed', 'Arial Narrow', system-ui, sans-serif;
  --rc-font-body: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --rc-font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

  --rc-fs-11: 0.6875rem;
  --rc-fs-12: 0.75rem;
  --rc-fs-13: 0.8125rem;
  --rc-fs-15: 0.9375rem;
  --rc-fs-17: 1.0625rem;
  --rc-fs-20: 1.25rem;
  --rc-fs-28: 1.75rem;
  --rc-fs-40: 2.5rem;
  --rc-fs-56: 3.5rem;
  --rc-fs-72: 4.5rem;

  --rc-lh-tight: 1.02;
  --rc-lh-hero: 1.18;
  --rc-lh-title: 1.14;
  --rc-lh-body: 1.55;
  --rc-track-display: 0.005em;
  --rc-track-label: 0;

  --rc-space-1: 4px;
  --rc-space-2: 8px;
  --rc-space-3: 12px;
  --rc-space-4: 16px;
  --rc-space-6: 24px;
  --rc-space-8: 32px;
  --rc-space-12: 48px;
  --rc-space-16: 64px;

  --rc-r: 0px;
  --rc-r-small: 2px;
  --rc-cut: 14px;
  --rc-cut-path: polygon(0 0, calc(100% - var(--rc-cut)) 0, 100% var(--rc-cut), 100% 100%, 0 100%);
  --rc-hairline: 1px solid var(--rc-rule);

  --rc-dur-1: 110ms;
  --rc-dur-2: 170ms;
  --rc-dur-3: 240ms;
  --rc-dur-4: 380ms;
  --rc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rc-ease-snap: var(--rc-ease-out);
  --rc-stagger: 38ms;

  --rc-focus-ring: 2px solid var(--rc-ice);
  --rc-focus-offset: 3px;
}

/* Bridge for the upstream component bundle: it already reads these names, so
   remapping them repaints the shell without editing captured selectors. */
html[data-aim-local] {
  --rc-font-body: system-ui, 'Segoe UI', sans-serif;
  --rc-font-display: 'ValoX Display', system-ui, sans-serif;
  --rc-font-condensed: var(--rc-font-display);
  --rc-r: 8px;
  --rc-r-small: 6px;
  --rc-r-panel: 12px;
  --rc-elevation-card: 0 8px 24px color-mix(in srgb, var(--rc-night) 32%, transparent);
  --rc-cut-path: none;

  --sp-ink: var(--rc-paper);
  --sp-panel: var(--rc-paper-raise);
  --sp-raised: var(--rc-paper-sunk);
  --sp-line: var(--rc-rule);
  --sp-text: var(--rc-ink);
  --sp-muted: var(--rc-slate);
  --sp-signal: var(--rc-signal);
  --sp-ice: var(--rc-ice);
  --sp-body: var(--rc-font-body);
  --sp-display: var(--rc-font-condensed);
  --sp-radius: var(--rc-r);

  --h-accent: var(--rc-signal);
  --h-accent-deep: var(--rc-signal-text);
  --h-accent-mid: #ff8b93;
  --h-on-accent: var(--rc-on-signal);
  --h-danger: var(--rc-signal-text);
  --h-bg: var(--rc-paper);
  --h-panel: var(--rc-paper-raise);
  --h-surface: var(--rc-paper-sunk);
  --h-chrome: var(--rc-paper);
  --h-chrome-line: var(--rc-rule);
  --h-text: var(--rc-ink);
  --h-text-soft: #2b3a46;
  --h-text-muted: var(--rc-slate);
  --h-border: var(--rc-rule);
  --h-row-hover: #dcd6cb;
  --h-grid: #c9c2b6;

  --wk-red: var(--rc-signal-text);
  --wk-cyan: var(--rc-ice);
  --wk-paper: var(--rc-paper-raise);
  --wk-muted: var(--rc-slate);
  --wk-line: var(--rc-rule);
  --app-font: var(--rc-font-body);
  --sheepu-accent: var(--rc-signal);
  color-scheme: light;
}

/* The 3D stage, live HUD and pause overlays stay dark: a paper plane behind a
   viewmodel would wash out the scene and the crosshair. */
html[data-aim-local]:is(.aim-gameplay-active, .aim-trainer-open),
html[data-aim-local] body.al-training-active,
html[data-aim-local] .hall-portal.is-night {
  --h-bg: var(--rc-night);
  --h-panel: var(--rc-night-2);
  --h-surface: var(--rc-night-2);
  --h-chrome: var(--rc-night);
  --h-chrome-line: var(--rc-night-rule);
  --h-border: var(--rc-night-rule);
  --h-text: var(--rc-night-text);
  --h-text-soft: #c6ccd2;
  --h-text-muted: #93a0ab;
  --h-row-hover: #1d2933;
  color-scheme: dark;
}

html[data-aim-local] :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--rc-focus-ring);
  outline-offset: var(--rc-focus-offset);
}

html[data-aim-local] ::selection {
  color: var(--rc-paper-raise);
  background: var(--rc-ink);
}

html[data-aim-local] :is(input, textarea) {
  caret-color: var(--rc-signal);
  font-variant-numeric: tabular-nums;
}
