/* ============================================================
   CS2 JOURNAL — DESIGN TOKENS
   Single source of truth. No color/space/type value is invented
   outside this file. All other CSS derives from these vars.
   ============================================================ */

/* ── Vendored fonts — local woff2 only, zero CDN ────────────── */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/vendor/fonts/barlow-semi-condensed-latin-600-normal.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+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/vendor/fonts/barlow-semi-condensed-latin-700-normal.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+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/barlow-latin-400-normal.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+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/vendor/fonts/barlow-latin-500-normal.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+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Palette — CS2 cool steel-charcoal ──────────────────────── */
  --bg:          #0E1114;
  --surface:     #14191E;
  --card:        #171C21;
  --card-raised: #212931;

  --border:        #2C353D;
  --border-strong: #3A454F;

  /* Signature CS orange-gold — the energy accent, used with restraint */
  --orange:       #E8852B;
  --orange-bright:#FFA24E;
  --orange-dim:   rgba(232, 133, 43, 0.14);

  /* Functional faction colors — CS semantics */
  --blue:  #5A9FD4;   /* CT steel-blue */
  --tan:   #D7B36C;   /* T-side gold/tan */
  --red:   #E5443B;   /* bomb/danger */
  --green: #5BA86B;   /* win/victory — muted tactical forest green */
  --green-dim: rgba(91, 168, 107, 0.14);
  /* Full-row win/loss infill tokens (feat1) */
  --green-infill: rgba(91, 168, 107, 0.10);
  --red-infill:   rgba(229, 68, 59,  0.10);

  /* Text */
  --text:       #F4F6F8;
  --text-muted: #8A949C;
  --white:      #FFFFFF;
  --black:      #000000;

  /* Accents */
  --focus:       rgba(232, 133, 43, 0.55);  /* orange focus ring */
  --grid-line:   rgba(138, 148, 156, 0.04);
  --sidebar-texture: rgba(255, 255, 255, 0.025);  /* subtle sidebar hairline */

  /* ── Broadcast accent treatments ─────────────────────────────── */
  --orange-glow: rgba(232, 133, 43, 0.22);  /* diffuse glow for insight callout */
  --orange-grad: linear-gradient(135deg, rgba(232, 133, 43, 0.18) 0%, transparent 60%);

  /* Category remap — CS-authentic, distinct */
  --cat-training: var(--orange);
  --cat-warmup:   var(--blue);
  --cat-match:    var(--tan);
  /* Fallback for unknown/removed category ids */
  --cat-fallback: var(--border-strong);
  --danger:       var(--red);

  /* ── Typography ──────────────────────────────────────────────── */
  /* Display: condensed caps for HUD headers, titles, buttons, labels, wordmark */
  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', Arial, sans-serif;
  /* Body: readable prose and form fields */
  --font-sans:    'Barlow', -apple-system, 'Segoe UI', system-ui, sans-serif;
  /* Mono: IDs, durations, timestamps, numeric readouts */
  --font-mono:    'Cascadia Code', 'Cascadia Mono', Consolas, 'SF Mono',
                  ui-monospace, 'JetBrains Mono', monospace;

  /* Type scale */
  --text-label: 11px;   /* ALL-CAPS, letter-spacing 0.12em, weight 700 */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  15px;
  --text-lg:    20px;
  --text-xl:    26px;
  --text-2xl:   36px;

  /* ── Spacing ──────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ── Border radius — hard tactical edges ─────────────────────── */
  --radius-sm: 2px;
  --radius:    3px;
  --radius-lg: 4px;

  /* ── Clip corner — CS2 buy-menu chamfer ──────────────────────── */
  --clip-corner: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-card:  0 1px 0 rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--border-strong);

  /* ── Motion ──────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur:      160ms;
  --dur-slow: 220ms;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-index ─────────────────────────────────────────────────── */
  --z-topbar:  50;
  --z-overlay: 90;
  --z-modal:   100;

  /* ── Scrollbar ───────────────────────────────────────────────── */
  --scrollbar-thumb:       var(--border-strong);
  --scrollbar-thumb-hover: rgba(232, 133, 43, 0.45);
  --scrollbar-track:       transparent;
}

/* ── Reset / base ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background-color: var(--bg);
  /* Barely-perceptible tactical grid — texture, not pattern */
  background-image:
    repeating-linear-gradient(
      0deg,
      var(--grid-line) 0px,
      var(--grid-line) 1px,
      transparent 1px,
      transparent 32px
    ),
    repeating-linear-gradient(
      90deg,
      var(--grid-line) 0px,
      var(--grid-line) 1px,
      transparent 1px,
      transparent 32px
    );
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Label utility — condensed display caps ──────────────────────── */
.label {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Mono data utility ───────────────────────────────────────────── */
.mono {
  font-family: var(--font-mono);
}

/* ── Focus ring — orange tactical ring ───────────────────────────── */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Custom scrollbar — dark tactical theme ──────────────────────
   Firefox: thin scrollbar on all scroll containers.
   WebKit: styled thumb + track; orange-tinted hover.
   ─────────────────────────────────────────────────────────────── */
html,
body {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit global scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 6px;
  /* 3px transparent border creates inset padding effect */
  border: 3px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* Scroll containers: Firefox thin scrollbar on key regions */
.screen-transition-wrapper,
.screen-pad,
.app-shell-body,
.session-list-panel-body,
.export-session-list,
.modal-body,
.vk-table-wrap,
.matches-v2-table-wrap,
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}