/* Keyforge tokens. Palette is the mark: app-icon yellow and ink-black. */
:root {
  --bg: #0c0c0c;
  --bg-raise: #141414;
  --bg-panel: #161616;
  --bg-inset: #101010;

  --line: #2a2a2a;
  --line-soft: #1c1c1c;
  --line-strong: #3d3d3d;

  --gold: #fdc403;
  --gold-deep: #e0ab00;
  --gold-hi: #ffe56a;
  --gold-dim: rgba(253, 196, 3, .14);
  --gold-glow: rgba(253, 196, 3, .32);

  /* Kept as aliases so existing JS/CSS class names (.blue / .mint) still resolve. */
  --blue-deep: #c49200;
  --blue: var(--gold-deep);
  --blue-hi: var(--gold);
  --blue-dim: var(--gold-dim);
  --blue-glow: var(--gold-glow);

  --mint: #5ee0a0;
  --amber: #fdc403;
  --hot: #ff6b5d;

  --ink: #f4f1e8;
  --ink-2: #b8b3a6;
  --ink-3: #7d786c;
  --ink-4: #575247;

  --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --shell: 1180px;
  --gut: clamp(18px, 4vw, 40px);
  --radius: 18px;
  --radius-sm: 12px;

  --step--1: clamp(11px, .68rem + .1vw, 12.5px);
  --step-0: clamp(15px, .9rem + .15vw, 17px);
  --step-1: clamp(18px, 1.05rem + .35vw, 21px);
  --step-2: clamp(22px, 1.2rem + .8vw, 30px);
  --step-3: clamp(28px, 1.5rem + 1.7vw, 46px);
  --step-4: clamp(38px, 1.8rem + 3.6vw, 82px);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, .75);
  --cut: none;
}