@layer tokens {
/* Design tokens: the only place with raw colors and sizes.
   The app is dark only. A future theme overrides these custom properties under [data-theme="..."]
   and every component follows, because components only read tokens. */
:root {
  color-scheme: dark;

  /* Surfaces, darkest to lightest: page, app, panel, raised, control, hover */
  --bg-0: #05070a;
  --bg-1: #0a0e13;
  --bg-2: #0f141b;
  --bg-3: #151b24;
  --bg-4: #1c2430;
  --bg-5: #242e3c;
  --sel: var(--bg-4);
  --scrim: rgb(3 5 8 / 0.6);

  /* Lines */
  --line: #1a212b;
  --line-2: #262f3b;

  /* Text, strongest to faintest */
  --fg: #e8edf3;
  --fg-2: #a9b4c1;
  --fg-3: #6d7a89;
  --fg-4: #465160;
  --fg-prose: #d3dae3;
  --fg-on-accent: #0a0e13;
  --fg-on-light: #0a0e13;

  /* Brand: the "strange loop" iris → aqua */
  --accent: #8f9bff;
  --accent-2: #5fd4d0;
  --accent-soft: rgb(143 155 255 / 0.13);
  --accent-line: rgb(143 155 255 / 0.38);
  --loop: linear-gradient(100deg, var(--accent), var(--accent-2));

  /* Semantic */
  --ok: #4fd18b;
  --warn: #f2b84b;
  --bad: #ff6b7d;
  --info: #7fb7ff;
  --mark: #ff3d63;
  --claude: #e8a27c;
  --merged: #b48cff;
  --pr-open: #4fd18b;
  --code-fg: #ffd7a1;
  --log-bg: #07090d;
  --log-error: #ff8b99;

  /* Severity */
  --sev-critical: #ff5d6c;
  --sev-major: #ff9f43;
  --sev-minor: #f5d061;
  --sev-cosmetic: #7fb7ff;

  /* Priority */
  --pri-urgent: #ff5d6c;
  --pri-high: #f2b84b;
  --pri-normal: #7fb7ff;
  --pri-low: #6d7a89;

  /* GitHub labels on community reports */
  --lbl-violet: #c49bff;
  --lbl-lime: #9be37b;
  --lbl-silver: #a9b4c1;
  --lbl-grey: #8b97a6;

  /* Status */
  --st-open: #8b97a6;
  --st-prog: #f2b84b;
  --st-rqa: #8f9bff;
  --st-ver: #4fd18b;
  --st-reo: #ff6b7d;
  --st-closed: #4fd18b;
  --st-dim: #6d7a89;
  --st-open-bar: #3a4655;

  /* Project icon presets */
  --picon-eco: radial-gradient(circle at 30% 30%, #79d39b, #2a7f6a 55%, #163d5c);
  --picon-eco-ink: #04140f;
  --picon-ember: radial-gradient(circle at 30% 30%, #ffb38a, #b3465e 60%, #3a1c3f);
  --picon-ember-ink: #2a0710;
  --picon-iris: radial-gradient(circle at 30% 30%, #b9c1ff, #5a63c9 60%, #1c1f4a);
  --picon-iris-ink: #0b0d24;
  --picon-ocean: radial-gradient(circle at 30% 30%, #9fdcff, #2f7fb3 60%, #12304d);
  --picon-ocean-ink: #04121d;
  --picon-rose: radial-gradient(circle at 30% 30%, #ffc2d6, #c2557f 60%, #43172f);
  --picon-rose-ink: #2a0715;
  --picon-slate: radial-gradient(circle at 30% 30%, #d3d9e2, #67717f 60%, #232931);
  --picon-slate-ink: #0b0e12;
  --white: #ffffff;
  --black: #000000;

  /* Channels for translucent overlays: rgb(var(--ink-rgb) / 0.8) */
  --ink-rgb: 10 14 19;
  --void-rgb: 3 5 8;
  --white-rgb: 255 255 255;
  --black-rgb: 0 0 0;

  /* Sticky notes on the whiteboard */
  --sticky-yellow: #f5d061;
  --sticky-pink: #f8a5c2;
  --sticky-blue: #9cc7ff;
  --sticky-green: #a6e3b5;
  --sticky-ink: #1d1a10;

  /* Type */
  --f-display: "Bricolage Grotesque", "Onest", system-ui, sans-serif;
  --f-ui: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --f-hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
  /* Type scale, one step per size the demo uses, named by pixels. */
  --fs-8: 8px;
  --fs-9: 9px;
  --fs-9-5: 9.5px;
  --fs-10: 10px;
  --fs-10-5: 10.5px;
  --fs-11: 11px;
  --fs-11-5: 11.5px;
  --fs-12: 12px;
  --fs-12-5: 12.5px;
  --fs-12-8: 12.8px;
  --fs-13: 13px;
  --fs-13-5: 13.5px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-21: 21px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-30: 30px;
  --fs-32: 32px;
  --fs-34: 34px;
  --fs-38: 38px;

  /* Shape */
  /* Radii, named by pixels. */
  --r-1: 1px;
  --r-2: 2px;
  --r-3: 3px;
  --r-4: 4px;
  --r-5: 5px;
  --r-6: 6px;
  --r-7: 7px;
  --r-8: 8px;
  --r-9: 9px;
  --r-10: 10px;
  --r-11: 11px;
  --r-12: 12px;
  --r-13: 13px;
  --r-14: 14px;
  --r-16: 16px;
  --r-18: 18px;
  --r-round: 50%;
  --r-pill: 999px;

  /* Elevation */
  --shadow-pop: 0 20px 50px -10px rgb(0 0 0 / 0.8);
  --shadow-dialog: 0 30px 90px -10px rgb(0 0 0 / 0.85);
  --shadow-card: 0 14px 30px -14px rgb(0 0 0 / 0.8);

  /* Scrollbars */
  --scroll-thumb: var(--bg-5);
  --scroll-track: transparent;

  /* Layout */
  --rail-w: 60px;
  --side-w: 256px;
  --top-h: 52px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));

  /* Motion */
  --t-fast: 120ms;
  --t-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Stacking */
  /* Order inside one component's own stacking context (an item over its neighbours). */
  --z-local-1: 1;
  --z-local-2: 2;
  --z-local-3: 3;
  --z-local-4: 4;
  --z-local-5: 5;
  --z-local-6: 6;
  /* App layers */
  --z-sticky: 3;
  --z-bulk: 8;
  --z-rail: 30;
  --z-sheet: 40;
  --z-modal: 50;
  --z-lightbox: 70;
  --z-pop: 80;
  --z-toast: 90;
}
}