:root {
  /* colors */
  --background: #FBF7EF;
  --surface: #FFFDF8;
  --surface-2: #F6F0E4;
  --primary: #0D2B52;
  --primary-dark: #081D39;
  --primary-soft: #E8EDF5;
  --accent: #C89B55;
  --accent-soft: #F3E8D4;
  --accent-2: #D9B77A;
  --border: #E9E1D2;
  --border-strong: #D9CDB8;
  --text: #263238;
  --text-muted: #7D746A;
  --success: #3E7A4E;
  --success-soft: #E7F1E9;
  --info-soft: #E8EDF5;
  --warning: #A9761F;
  --warning-soft: #F7ECD8;
  --neutral-soft: #EEEAE1;
  --danger: #9C3B2E;
  --danger-soft: #F6E5E2;

  /* shape */
  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 18px;
  --shadow: 0 1px 3px rgba(38, 30, 18, .06), 0 4px 14px rgba(38, 30, 18, .05);
  --shadow-strong: 0 4px 24px rgba(38, 30, 18, .12);

  /* spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* type */
  --font-ui: "Segoe UI", "Arial Hebrew", system-ui, sans-serif;
  --font-display: "David Libre", David, "Frank Ruhl Libre", "Times New Roman", serif;
  --fs-body: 15.5px;
  --fs-small: 13.5px;
  --fs-tiny: 12px;

  /* layout */
  --max-width: 1080px;
  --header-h: 62px;
  --catbar-h: 54px; /* set to 0 by JS when the bar is hidden */
  --player-h: 0px; /* the bottom mini-player was removed — tiles carry their own player */
}