/* The ONLY place colours, type and spacing are defined (design direction A, "Night flight").
   Components use these roles and never write a colour value of their own.
   The globe reads its colours from here too, via getComputedStyle. */
:root {
  color-scheme: dark;
  /* surfaces */
  --bg: #0A1022;
  --surface: #131C38;
  --surface-raised: #1A2547;
  --line: #26325A;
  /* text */
  --ink: #EEF1FA;
  --muted: #A2ADCB;
  --accent: #FFB547;
  --on-accent: #1A1203;
  --danger: #FF8A8A;
  --success: #7BE495;
  --focus: #FFE27A;
  /* globe */
  --globe-ocean: #0F1834;
  --globe-land: #4A5E97;
  --globe-rim: #3E63D6;
  --arc: #FFB547;
  --label: #DCE3F7;
  /* one colour per home, in group order */
  --h1: #FFB547; --h2: #FF7A7A; --h3: #FFE27A; --h4: #7BE495; --h5: #4FD1C5; --h6: #6CB8FF;
  --h7: #B79CFF; --h8: #FF8FC7; --h9: #F7A26B; --h10: #C6F16D; --h11: #8EE3FF; --h12: #E0B8FF;
  /* type */
  --display: "Unbounded", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --data: "IBM Plex Mono", ui-monospace, monospace;
  --step--1: 0.75rem; --step-0: 0.9375rem; --step-1: 1.125rem; --step-2: 1.375rem; --step-3: 1.75rem;
  /* space + shape */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius-s: 8px; --radius-m: 12px; --radius-l: 18px; --radius-pill: 999px;
}