/* Warlocks game UI design tokens — see docs/STYLE.md */

:root {
  /* Typography (px; canvas HUD mirrors these in ui-tokens.ts) */
  --font-2xs: 10px;
  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-md: 16px;
  --font-lg: 20px;
  --font-xl: 26px;
  --font-2xl: 34px;
  --font-display: clamp(26px, 6vw, 42px);

  /* Spacing (4px grid) */
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Semantic colors */
  --color-text: #e8e6ff;
  --color-text-muted: #9b8fd6;
  --color-text-secondary: #c9c4ec;
  --color-gold: #ffd479;
  --color-gold-text: #f0e6c8;
  --color-border: rgba(150, 130, 255, 0.35);
  --color-border-subtle: rgba(150, 130, 255, 0.18);

  /* Selection insets + back-button geometry */
  --sel-inset-purple:
    inset 0 0 16px rgba(150, 110, 255, 0.48),
    inset 0 0 32px rgba(90, 60, 200, 0.26);
  --sel-inset-gold:
    inset 0 0 14px rgba(255, 190, 70, 0.42),
    inset 0 0 28px rgba(255, 130, 30, 0.24);
  --back-btn-top: 10px;
  --back-btn-left: 12px;
  --back-btn-min-size: 44px;
  --back-btn-block: calc(var(--back-btn-top) + var(--back-btn-min-size) + var(--space-2));
}