/*
 * Design tokens — the only place where raw values are defined.
 * Everything else references these. No build step, so the SCSS variables
 * from the M_E_K standard are expressed as custom properties here.
 *
 * Scales below match the existing design; the spacing and type steps that
 * the current stylesheet still hardcodes are listed as the target scale.
 */
:root {
  /* Colors */
  --bg: #f4f6f7;
  --surface: #fff;
  --surface2: #edf1f3;
  --line: #d9dfe3;
  --text: #17212a;
  --muted: #697681;
  --mint: #377f70;
  --mint-soft: #dcece7;
  --navy: #17263c;
  --gold: #96783e;
  --danger: #a8584b;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* Type scale — base is 16px, matching the app's body font */
  --font-xs: 11px;
  --font-sm: 12px;
  --font-md: 14px;
  --font-base: 16px;
  --font-lg: 18px;
  --font-xl: 22px;
  --font-2xl: 28px;
  --font-3xl: 36px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;

  /* Layering */
  --z-sticky: 30;
  --z-dialog: 50;
  --z-toast: 100;

  /* Layout */
  --nav: 76px;
  --content-max: 760px;
}