/* Roost UI System v0.1 tokens — ported verbatim from the design system
   (product-plan/design/Roost UI System.dc.html). Every color is semantic
   before it is a hue; components reference roles, and [data-theme="dark"]
   is the entire dark mode implementation. Do not invent values here. */

:root {
  /* ── Family ─────────────────────────────────────────── */
  --roost-font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --roost-font-display: "DM Serif Display", Georgia, serif;
  --roost-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Surface ────────────────────────────────────────── */
  --roost-bg: #F7F6F3;
  --roost-surface: #FFFFFF;
  --roost-surface-2: #F2F0EB;
  --roost-surface-3: #E8E5DE;
  --roost-inset: #FBFAF8;
  --roost-line: #E4E1D9;
  --roost-line-strong: #CFCBC0;

  /* ── Ink ────────────────────────────────────────────── */
  --roost-text: #191B18;
  --roost-text-2: #4C4F49;
  --roost-text-3: #7C807A;
  --roost-text-inv: #F6F7F5;

  /* ── Action + brand ─────────────────────────────────── */
  --roost-accent: #1E3A8A;
  --roost-accent-hover: #152A66;
  --roost-accent-fg: #FFFFFF;
  --roost-accent-soft: #E8ECF8;
  --roost-green: #1E9E56;
  --roost-green-bright: #2ECC71;
  --roost-ring: rgba(30, 58, 138, .28);

  /* ── Status hues (bg / fg / border) ─────────────────── */
  --roost-ok-bg: #E8F8EF;      --roost-ok-fg: #14733E;      --roost-ok-bd: #BFE8D2;
  --roost-warn-bg: #FDF3E0;    --roost-warn-fg: #8A5A11;    --roost-warn-bd: #F0DDB4;
  --roost-danger-bg: #FCEEEB;  --roost-danger-fg: #9B2C1B;  --roost-danger-bd: #F3D2CA;
  --roost-info-bg: #E9EEF9;    --roost-info-fg: #22408F;    --roost-info-bd: #CBD8F0;
  --roost-neutral-bg: #F1EFEA; --roost-neutral-fg: #55584F; --roost-neutral-bd: #DFDBD1;
  --roost-muted-bg: #F4F3EF;   --roost-muted-fg: #8A8D85;   --roost-muted-bd: #E4E1D9;
  /* Flow-screen node tints (Roost UI System flow-screen drop, 2026-08-12) */
  --roost-violet-bg: #F2ECF8;  --roost-violet-fg: #6B3D93;  --roost-violet-bd: #E0D2EE;
  --roost-teal-bg: #E6F4F4;    --roost-teal-fg: #1F6E6E;    --roost-teal-bd: #C4E3E3;
  --roost-dot: #DCD8CE;

  /* ── Code / dual-pane ───────────────────────────────── */
  --roost-code-bg: #FBFAF8;
  --roost-code-key: #22408F;
  --roost-code-str: #14733E;
  --roost-code-num: #8A5A11;
  --roost-code-bool: #7D4BA0;
  --roost-code-punct: #9A9A92;

  /* ── Charts (categorical) ───────────────────────────── */
  --roost-chart-1: #1E3A8A;
  --roost-chart-2: #1E9E56;
  --roost-chart-3: #DE8C25;
  --roost-chart-4: #2A8C8C;
  --roost-chart-5: #8E5BA8;

  /* Report chart series — validated by the dataviz palette checks
     (lightness band, chroma, CVD separation, contrast) against #FFFFFF.
     Fixed order: 1 sends, 2 opens, 3 clicks — color follows the entity. */
  --roost-viz-1: #1E9E56;
  --roost-viz-2: #4A69C9;
  --roost-viz-3: #DE8C25;

  /* ── Elevation ──────────────────────────────────────── */
  --roost-shadow-1: 0 1px 2px rgba(10, 42, 23, .07);
  --roost-shadow-2: 0 10px 28px -18px rgba(10, 42, 23, .28);
  --roost-shadow-panel: 0 32px 70px -30px rgba(10, 42, 23, .34);
}

[data-theme="dark"] {
  --roost-bg: #0D110F;
  --roost-surface: #141915;
  --roost-surface-2: #1A211C;
  --roost-surface-3: #232B25;
  --roost-inset: #101511;
  --roost-line: #28312A;
  --roost-line-strong: #3A453C;

  --roost-text: #E8EDE8;
  --roost-text-2: #AEB8AF;
  --roost-text-3: #7C877E;
  --roost-text-inv: #0D110F;

  --roost-accent: #4A73D8;
  --roost-accent-hover: #6188E8;
  --roost-accent-fg: #0A0F1E;
  --roost-accent-soft: #1A2440;
  --roost-green: #3FD98A;
  --roost-green-bright: #2ECC71;
  --roost-ring: rgba(110, 143, 232, .35);

  --roost-ok-bg: #102A1D;      --roost-ok-fg: #5FDDA0;      --roost-ok-bd: #1E4A32;
  --roost-warn-bg: #2E2312;    --roost-warn-fg: #F0BE6A;    --roost-warn-bd: #4A3819;
  --roost-danger-bg: #331915;  --roost-danger-fg: #F09182;  --roost-danger-bd: #52281F;
  --roost-info-bg: #151F38;    --roost-info-fg: #8FB0F5;    --roost-info-bd: #25355C;
  --roost-neutral-bg: #1D241F; --roost-neutral-fg: #A8B2A9; --roost-neutral-bd: #2C352E;
  --roost-muted-bg: #171D18;   --roost-muted-fg: #7C877E;   --roost-muted-bd: #28312A;
  --roost-violet-bg: #221A2E;  --roost-violet-fg: #C79BE0;  --roost-violet-bd: #3A2C4C;
  --roost-teal-bg: #102626;    --roost-teal-fg: #4FBFBF;    --roost-teal-bd: #1E4444;
  --roost-dot: #232B25;

  --roost-code-bg: #101511;
  --roost-code-key: #8FB0F5;
  --roost-code-str: #5FDDA0;
  --roost-code-num: #F0BE6A;
  --roost-code-bool: #C79BE0;
  --roost-code-punct: #6E7970;

  --roost-chart-1: #6E8FE8;
  --roost-chart-2: #3FD98A;
  --roost-chart-3: #F0A94E;
  --roost-chart-4: #4FBFBF;
  --roost-chart-5: #B486D6;

  /* Validated against the dark surface #141915 — its own steps, not a flip. */
  --roost-viz-1: #27AE66;
  --roost-viz-2: #6E8FE8;
  --roost-viz-3: #C9812F;

  --roost-shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
  --roost-shadow-2: 0 10px 28px -18px rgba(0, 0, 0, .7);
  --roost-shadow-panel: 0 32px 70px -30px rgba(0, 0, 0, .85);
}