/**
 * "Crimson Rift" design tokens — the same palette, type and geometry the
 * R_MASTER_Overlay runs on, flattened from TypeScript into plain custom
 * properties so this site needs no build step.
 *
 * Source of truth upstream: packages/shared/src/tokens.ts. If you retune the
 * overlay theme, mirror the colour block below and the two sites stay siblings.
 *
 * Naming is kept identical (--rmo-*) deliberately: overlay CSS can be pasted
 * in here and just work.
 */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
  /* ─── Colour ───────────────────────────────────────────────────────────
     Near-black base is #060406, not #000 — pure black crushes the smoke's
     darkest billows into a flat void and you lose all the depth. */
  --rmo-bg-void: #060406;
  --rmo-bg-deep: #0c0709;
  --rmo-bg-panel: #14090c;
  --rmo-bg-raised: #1c0e12;

  --rmo-red-core: #ff2b3b;
  --rmo-red-hot: #ff5c4d;
  --rmo-red-blood: #a8121f;
  --rmo-red-dark: #4a0810;
  --rmo-ember: #ff8a3d;
  --rmo-smoke-tint: #2a0d12;

  /* Overlay text tokens are tuned for text sitting on gameplay footage. On a
     document you read for minutes at a time they measure too low, so the dim
     tier is lifted the same way the dashboard lifts it — --rmo-text-dim at
     #6e4e55 is 2.7:1 on the panel, well under the 4.5:1 AA floor. */
  --rmo-text-hi: #f5e9ea;
  --rmo-text-mid: #c8b3b8;
  --rmo-text-dim: #a5858b;

  --rmo-success: #3dd68c;
  --rmo-warning: #ffb13d;
  --rmo-danger: #ff2b3b;
  --rmo-info: #4da6ff;

  /* ─── Type ─────────────────────────────────────────────────────────── */
  --rmo-font-display: 'Chakra Petch', 'Rajdhani', 'Bebas Neue', Impact, sans-serif;
  --rmo-font-body: 'Rajdhani', Inter, 'Segoe UI', system-ui, sans-serif;
  --rmo-font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  --rmo-tracking-label: 0.18em;
  --rmo-tracking-display: 0.04em;

  /* ─── Geometry ─────────────────────────────────────────────────────── */
  --rmo-chamfer: 14px;
  --rmo-hairline: 1px;
  --rmo-bracket: 22px;
  --rmo-glow-radius: 18px;
  --rmo-glow-opacity: 0.45;
  --rmo-scanline-opacity: 0.04;
  --rmo-scanline-pitch: 3px;

  /* ─── Motion ───────────────────────────────────────────────────────── */
  --rmo-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rmo-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --rmo-ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --rmo-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rmo-ease-snap: cubic-bezier(0.9, 0, 0.1, 1);

  --rmo-dur-instant: 90ms;
  --rmo-dur-fast: 180ms;
  --rmo-dur-normal: 320ms;
  --rmo-dur-slow: 560ms;
  --rmo-dur-glacial: 1100ms;

  /* ─── Layout ───────────────────────────────────────────────────────── */
  --rmo-measure: 68ch;
  --rmo-gutter: clamp(20px, 5vw, 64px);
  --rmo-max: 1240px;
}

/* Smaller chamfers below the tablet breakpoint. A 14px cut on a 300px-wide
   card eats a visible chunk of the corner content. */
@media (max-width: 720px) {
  :root {
    --rmo-chamfer: 10px;
    --rmo-bracket: 16px;
  }
}