:root {
  /* Exact SG_COLORS from 2D site */
  --color-inl: #D84A27;
  --color-met: #D0802F;
  --color-hcp: #D4AC4A;
  --color-pwv: #E0BE55;
  --color-alt: #DCB250;
  --color-rnr: #D8B84E;
  --color-gld: #E2C45A;
  --color-con: #C8A84A;
  --color-pop: #E0C850;
  --color-cou: #BDCC66;
  --color-rnb: #66CC99;
  --color-gos: #4364B3;
  --color-blu: #4A6BB8;
  --color-jaz: #3D5CAD;
  --color-lat: #7B5DBF;
  --color-jam: #6E48AF;
  --color-rap: #8E3761;
  --color-brb: #D52633;
  --color-dnb: #C82028;
  --color-hct: #D52633;
  --color-tec: #DB2E38;
  --color-hou: #D0222C;
  --color-tra: #E03440;
  --color-dtp: #FF227A;

  /* Remapped extras */
  --color-bla: #4A6BB8;
  --color-blz: #6E48AF;
  --color-cla: #C8A84A;
  --color-con-lat: #7B5DBF;
  --color-eas: #DCB250;
  --color-ele: #D0802F;
  --color-exp: #D84A27;
  --color-fol: #BDCC66;
  --color-fun: #E0C850;
  --color-new: #66CC99;
  --color-r-b: #66CC99;
  --color-sou: #D8B84E;
  --color-t-d: #D0222C;
  --color-wor: #D4AC4A;

  --color-bg: #0f0f14;
  --color-surface: #181820;
  --color-text-primary: #f0f0f5;
  /* Light timeline / expand panel -- 2D-inspired */
  --color-timeline-bg: #F5F3EF;
  --color-timeline-text: #2C2C2C;
  --color-timeline-text-muted: #5A5A5A;
  --color-timeline-text-dim: #777;
  --color-timeline-axis: #999;
  --color-timeline-lane: #D0CCC0;
  --color-timeline-border: #C8C4B8;
  --color-text-secondary: #9088a0;
  --color-text-muted: #605870;

  --font-body: -apple-system, 'PingFang SC', 'Noto Sans SC', 'Helvetica Neue', sans-serif;
  --text-xs: 9px;
  --text-sm: 11px;
  --text-base: 13px;
  --leading-tight: 1.2;

  --space-2xs: 2px;
  --space-xs: 3px;
  --space-sm: 6px;
  --space-md: 10px;
  --space-lg: 14px;

  --topbar-height: 44px;
  --spine-height: 32px;
  --timeline-height: 280px;
  --bottom-safe-area: env(safe-area-inset-bottom, 0px);

  --radius-sm: 2px;
  --radius-md: 5px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
}

/* Spine color helpers */
.spine-color-inl { --spine-color: var(--color-inl); }
.spine-color-met { --spine-color: var(--color-met); }
.spine-color-hcp { --spine-color: var(--color-hcp); }
.spine-color-pwv { --spine-color: var(--color-pwv); }
.spine-color-alt { --spine-color: var(--color-alt); }
.spine-color-rnr { --spine-color: var(--color-rnr); }
.spine-color-gld { --spine-color: var(--color-gld); }
.spine-color-con { --spine-color: var(--color-con); }
.spine-color-pop { --spine-color: var(--color-pop); }
.spine-color-cou { --spine-color: var(--color-cou); }
.spine-color-rnb { --spine-color: var(--color-rnb); }
.spine-color-gos { --spine-color: var(--color-gos); }
.spine-color-blu { --spine-color: var(--color-blu); }
.spine-color-jaz { --spine-color: var(--color-jaz); }
.spine-color-lat { --spine-color: var(--color-lat); }
.spine-color-jam { --spine-color: var(--color-jam); }
.spine-color-rap { --spine-color: var(--color-rap); }
.spine-color-brb { --spine-color: var(--color-brb); }
.spine-color-dnb { --spine-color: var(--color-dnb); }
.spine-color-hct { --spine-color: var(--color-hct); }
.spine-color-tec { --spine-color: var(--color-tec); }
.spine-color-hou { --spine-color: var(--color-hou); }
.spine-color-tra { --spine-color: var(--color-tra); }
.spine-color-dtp { --spine-color: var(--color-dtp); }
.spine-color-bla { --spine-color: var(--color-bla); }
.spine-color-blz { --spine-color: var(--color-blz); }
.spine-color-cla { --spine-color: var(--color-cla); }
.spine-color-con-lat { --spine-color: var(--color-con-lat); }
.spine-color-eas { --spine-color: var(--color-eas); }
.spine-color-ele { --spine-color: var(--color-ele); }
.spine-color-exp { --spine-color: var(--color-exp); }
.spine-color-fol { --spine-color: var(--color-fol); }
.spine-color-fun { --spine-color: var(--color-fun); }
.spine-color-new { --spine-color: var(--color-new); }
.spine-color-r-b { --spine-color: var(--color-r-b); }
.spine-color-sou { --spine-color: var(--color-sou); }
.spine-color-t-d { --spine-color: var(--color-t-d); }
.spine-color-wor { --spine-color: var(--color-wor); }