/* MetroRice design tokens (docs/design.md). Shared by ERB and any future React page. */
:root {
  /* Neutrals */
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-muted: #F9FAFB;
  --border: #E4E7EC;
  --divider: #EEF0F3;
  --border-input: #D0D5DD;
  --text: #111827;
  --text-secondary: #5B6472;
  --text-strong-muted: #344054;

  /* Brand */
  --brand: #0E7A55;
  --brand-hover: #0A5C40;
  --brand-bright: #12B76A;

  /* Status tones: background / text */
  --neutral-bg: #EAECF0;   --neutral-text: #3F4753;
  --info-bg: #D1E9FF;      --info-text: #1849A9;
  --success-bg: #D1FADF;   --success-text: #05603A;
  --attention-bg: #FEF0C7; --attention-text: #854A0E;
  --critical-bg: #FEE4E2;  --critical-text: #B42318;

  /* Type */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Shape and spacing */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
}