/* Flare design tokens. Palette shared with the inblock.io Aqua Suite theme:
   warm ground, near-black ink and rail, one orange brand accent, IBM Plex type.
   Every colour, size and font in the UI comes from here. */
:root {
  /* Brand */
  --brand: #E55B1F;
  --brand-deep: #C2470F;
  --brand-soft: #FFF3EC;
  --brand-line: #F6CDB6;
  --on-brand: #FFFFFF;

  /* Surfaces & text (light) */
  --ground: #F6F5F3;
  --surface: #FFFFFF;
  --surface-2: #FAF9F7;
  --surface-3: #F0EEEA;
  --ink: #141414;
  --ink-2: #4A4744;
  --ink-3: #8A857E;
  --line: #E7E3DE;
  --line-strong: #D2CCC4;

  /* The rail is always dark */
  --rail: #141414;
  --rail-2: #1A1918;
  --rail-ink: #A8A29A;
  --rail-ink-hi: #FFFFFF;
  --rail-line: #2C2C2C;
  --rail-grp: #6A645C;

  /* Semantic */
  --ok: #2E7D4F;    --ok-soft: #E6F2EA;
  --warn: #E55B1F;  --warn-soft: #FFF3EC;
  --crit: #B3261E;  --crit-soft: #FBE9E7;
  --note: #41566B;  --note-soft: #EAEFF4;

  /* Collaborator colours: one per peer, cycled. Distinct from the brand so your own
     cursor (brand orange) is never confused with someone else's. */
  --peer-0: #2E7D4F; --peer-1: #41566B; --peer-2: #7A4EAB; --peer-3: #B3261E; --peer-4: #0E7C86; --peer-5: #8A6D00;

  /* Editor & terminal (follow the page theme) */
  --editor-bg: #FFFFFF;
  --editor-fg: #141414;
  --editor-gutter: #B5AFA8;
  --editor-line: #FAF9F7;
  --editor-selection: #FFE3D3;
  --term-bg: #FAF9F7;
  --term-fg: #141414;
  --term-stderr: #B3261E;
  --term-compile: #41566B;
  --term-muted: #8A857E;

  /* Typography */
  --ui: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs: 14px;
  --fs-md: 15.5px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-hero: 44px;

  /* Spacing (4pt grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 32px; --s7: 48px; --s8: 72px;

  /* Shape & elevation */
  --r: 6px;
  --r-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, .05);
  --shadow: 0 1px 3px rgba(20, 20, 20, .06), 0 8px 24px -16px rgba(20, 20, 20, .22);

  /* Layout */
  --rail-w: 224px;
  --top-h: 52px;
  --content-max: 1180px;
  --bp-md: 900px;
  --bp-sm: 640px;

  color-scheme: light;
}

/* Dark: warm blacks, the same accent lifted for contrast. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #121110; --surface: #1A1917; --surface-2: #211F1D; --surface-3: #2A2724;
    --ink: #F4F1EE; --ink-2: #B5AFA8; --ink-3: #847E76;
    --line: #2E2B27; --line-strong: #403C37;
    --brand: #FF7A3D; --brand-deep: #E55B1F; --brand-soft: #2E1A10; --brand-line: #54301C;
    --on-brand: #1A0E07;
    --rail: #0C0C0B; --rail-2: #1A1918; --rail-line: #262523;
    --ok: #5FB484; --ok-soft: #14261C;
    --warn: #FF7A3D; --warn-soft: #2E1A10;
    --crit: #E1685C; --crit-soft: #301715;
    --note: #9DB4C8; --note-soft: #18222B;
    --editor-bg: #1A1917; --editor-fg: #F4F1EE; --editor-gutter: #5E5952; --editor-line: #211F1D; --editor-selection: #54301C;
    --term-bg: #121110; --term-fg: #F4F1EE; --term-stderr: #E1685C; --term-compile: #9DB4C8; --term-muted: #847E76;
    --peer-0: #5FB484; --peer-1: #9DB4C8; --peer-2: #B695E6; --peer-3: #E1685C; --peer-4: #4FB8C2; --peer-5: #D9B33A;
    --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 10px 28px -18px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #121110; --surface: #1A1917; --surface-2: #211F1D; --surface-3: #2A2724;
  --ink: #F4F1EE; --ink-2: #B5AFA8; --ink-3: #847E76;
  --line: #2E2B27; --line-strong: #403C37;
  --brand: #FF7A3D; --brand-deep: #E55B1F; --brand-soft: #2E1A10; --brand-line: #54301C;
  --on-brand: #1A0E07;
  --rail: #0C0C0B; --rail-2: #1A1918; --rail-line: #262523;
  --ok: #5FB484; --ok-soft: #14261C;
  --warn: #FF7A3D; --warn-soft: #2E1A10;
  --crit: #E1685C; --crit-soft: #301715;
  --note: #9DB4C8; --note-soft: #18222B;
  --editor-bg: #1A1917; --editor-fg: #F4F1EE; --editor-gutter: #5E5952; --editor-line: #211F1D; --editor-selection: #54301C;
  --term-bg: #121110; --term-fg: #F4F1EE; --term-stderr: #E1685C; --term-compile: #9DB4C8; --term-muted: #847E76;
  --peer-0: #5FB484; --peer-1: #9DB4C8; --peer-2: #B695E6; --peer-3: #E1685C; --peer-4: #4FB8C2; --peer-5: #D9B33A;
  --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 10px 28px -18px rgba(0, 0, 0, .8);
  color-scheme: dark;
}