/* CrateMate design tokens — Style B (bold, dark only). Mirrors tokens.json. */
:root {
  /* Brand */
  --cm-ink: #0B0B0D;
  --cm-cream: #F4EFE6;
  --cm-orange: #2EC4B6;

  /* Surfaces */
  --cm-bg: #0B0B0D;
  --cm-panel: #151518;
  --cm-row: #121214;
  --cm-control: #1E1D1A;
  --cm-chip: #26231E;
  --cm-divider: #24231F;
  --cm-outline: #4A463F;
  --cm-icon-edge: #2A2823;

  /* Text */
  --cm-text: #F4EFE6;
  --cm-text-2: #B8B1A5;
  --cm-text-3: #948D82;
  --cm-on-cream: #0B0B0D;
  --cm-on-cream-muted: #5C564C;
  --cm-on-orange: #0B0B0D;

  /* Key compatibility — never rely on colour alone: each state also has its own fill style + icon + word */
  --cm-key-fits-bg: #F4EFE6;
  --cm-key-fits-fg: #0B0B0D;
  --cm-key-shift-bg: #2EC4B6;
  --cm-key-shift-fg: #0B0B0D;
  --cm-key-clash-border: #FF5A3C;
  --cm-key-clash-fg: #FF8466;
  --cm-key-clash-bg: repeating-linear-gradient(135deg, #3A1A14 0 4px, #0B0B0D 4px 8px);

  /* Type */
  --cm-font-display: "Space Grotesk", system-ui, sans-serif;
  --cm-font-ui: "Inter", system-ui, sans-serif;

  /* Shape */
  --cm-radius-chip: 8px;
  --cm-radius-control: 10px;
  --cm-radius-button: 12px;
  --cm-radius-key: 12px;
  --cm-radius-row: 14px;
  --cm-radius-panel: 18px;

  /* Sizes */
  --cm-hit: 44px;
  --cm-header-h: 52px;
  --cm-row-min-h: 68px;
  --cm-key-chip: 48px;
}

.cm-num { font-family: var(--cm-font-display); font-variant-numeric: tabular-nums; }