/* EMERGE design tokens - v1.22.2 Visual Language & Shell (docs/V1.22.2_BRIEF.md).
   Raw scales first, then the semantic aliases every stylesheet actually uses. Change meaning here,
   not in styles.css. Loaded before styles.css / room-planner*.css. */
:root {
  /* Navy - navigation and structure */
  --navy-900: #0b2230;
  --navy-800: #102d3b;
  --navy-700: #16394a;
  --navy-600: #244856;
  --navy-400: #537383;
  --navy-300: #7fa1b0;
  --navy-200: #a3bfca;
  --navy-100: #c9dce5;

  /* Teal - action, selected, active */
  --teal-700: #0e645a;
  --teal-600: #147f72;
  --teal-500: #168978;
  --teal-200: #9ed4c7;
  --teal-100: #dff2ed;
  --teal-050: #eef7f6;

  /* Green - confirmed healthy / compliant */
  --green-700: #187966;
  --green-600: #1f6540;
  --green-200: #b8dec3;
  --green-100: #e9f6ed;

  /* Amber - attention, approaching deadline */
  --amber-800: #7c5b16;
  --amber-700: #a55711;
  --amber-500: #db9b22;
  --amber-200: #eadbb4;
  --amber-100: #fff5db;

  /* Red - genuine exception / failure / overdue, sparingly */
  --red-800: #83352e;
  --red-700: #a94439;
  --red-200: #e6b1aa;
  --red-100: #fbe6e3;

  /* Blue-grey - information and neutral context */
  --blue-700: #2f5f85;
  --blue-200: #c9dbe9;
  --blue-100: #e9f1f8;

  /* Neutral ink and lines */
  --ink-900: #182e3c;
  --ink-700: #294857;
  --ink-600: #537383;
  --ink-500: #627784;
  --ink-400: #8b9ba4;
  --ink-300: #aab5bb;
  --line-300: #bfccd3;
  --line-200: #dde5e9;
  --line-100: #e9eef0;

  /* Surfaces */
  --surface-0: #ffffff;
  --surface-1: #f8fafb;
  --surface-2: #f4f6f9;
  --surface-3: #eef3f5;

  /* Semantic aliases */
  --color-bg: var(--surface-2);
  --color-surface: var(--surface-0);
  --color-surface-quiet: var(--surface-1);
  --color-text: var(--ink-900);
  --color-text-strong: var(--navy-800);
  --color-muted: var(--ink-500);
  --color-faint: var(--ink-400);
  --color-border: var(--line-200);
  --color-border-strong: var(--line-300);
  --color-action: var(--teal-600);
  --color-action-hover: var(--teal-700);
  --color-action-text: #ffffff;
  --color-link: var(--teal-700);
  --color-focus: var(--amber-500);
  --color-nav-bg: var(--navy-800);
  --color-nav-text: var(--navy-100);
  --color-nav-muted: var(--navy-300);
  --color-nav-active-bg: var(--navy-600);
  --color-nav-accent: var(--teal-500);

  /* Status - the only colours that carry meaning */
  --status-priority: var(--red-700);
  --status-priority-bg: var(--red-100);
  --status-priority-border: var(--red-200);
  --status-watch: var(--amber-700);
  --status-watch-bg: var(--amber-100);
  --status-watch-border: var(--amber-200);
  --status-opportunity: var(--teal-700);
  --status-opportunity-bg: var(--teal-050);
  --status-opportunity-border: var(--teal-200);
  --status-ok: var(--green-700);
  --status-ok-bg: var(--green-100);
  --status-ok-border: var(--green-200);
  --status-info: var(--blue-700);
  --status-info-bg: var(--blue-100);
  --status-info-border: var(--blue-200);

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-stat: 34px;
  --leading: 1.55;
  --tracking-caps: 1.5px;

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

  /* Shape and depth */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 45, 59, .06);
  --shadow-2: 0 6px 20px rgba(16, 45, 59, .08);
  --shadow-3: 0 18px 50px rgba(16, 45, 59, .28);
  --focus-ring: 3px solid var(--color-focus);

  /* Layout */
  --sidebar-w: 236px;
  --content-max: 1320px;
  --gutter: 40px;
}