/* ==========================================================================
   Direction B — ARENA
   Stream-night energy. Dark first, condensed uppercase display, chunky
   rounded cards, brand colour used as glow and big blocks.
   Pairing: Barlow Condensed (display) + Barlow (text).
   ========================================================================== */
:root[data-direction="arena"] {
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Barlow", system-ui, sans-serif;
  --display-weight: 800;
  --display-case: uppercase;
  --display-tracking: 0.005em;
  --display-leading: .92;
  --label-tracking: .1em;
  --label-weight: 700;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius-pill: 999px;
  --radius-btn: 12px;

  --card-pad: 10px;
  --card-radius: 18px;
  --media-pad: 8%;
  --media-radius: 12px;
  --media-bg: radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--brand) 22%, var(--color-mat)) 0%, var(--color-mat) 70%);
  --grid-min: 164px;
}
:root[data-direction="arena"][data-mode="dark"] {
  --color-bg: #0a0c11;
  --color-surface: #12151d;
  --color-surface-2: #1b202b;
  --color-text: #f4f6fa;
  --color-muted: #9aa3b4;
  --color-border: #262c39;
  --color-mat: #161a23;
}
:root[data-direction="arena"][data-mode="light"] {
  --color-bg: #edf0f4;
  --color-surface: #ffffff;
  --color-surface-2: #e2e7ee;
  --color-text: #0c0f16;
  --color-muted: #535d70;
  --color-border: #d2d8e1;
  --color-mat: #e5e9ef;
}
/* flourishes */
[data-direction="arena"] .pcard { transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
[data-direction="arena"] .pcard:hover { border-color: var(--brand-line); transform: translateY(-2px); }
[data-direction="arena"] .pcard__title { font-weight: 600; }
[data-direction="arena"] .price { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; }
[data-direction="arena"] .pcard .price { font-size: 1.2rem; }
[data-direction="arena"] .price--xl { font-size: var(--fs-3xl); }
[data-direction="arena"] .site-nav a { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: var(--fs-m); letter-spacing: .04em; }
[data-direction="arena"] .site-header { border-bottom-color: var(--brand); border-bottom-width: 2px; }
[data-direction="arena"] .hero { background:
    radial-gradient(70% 90% at 85% 30%, color-mix(in oklab, var(--brand) 38%, transparent) 0%, transparent 70%),
    var(--color-bg); }
[data-direction="arena"] .eyebrow { color: var(--brand-ink); }
[data-direction="arena"] .btn, [data-direction="arena"] .buy-btn { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
[data-direction="arena"] .section__title { font-size: var(--fs-3xl); }