/* Design tokens. Dark is the default; light comes from the OS or a pinned choice (html[data-theme]). */
:root {
  color-scheme: dark;
  --bg: #0b0c0f;
  --surface-1: #111318;
  --surface-2: #171a20;
  --surface-3: #1e2229;
  --surface-4: #272c35;
  --line: #22262e;
  --line-2: #2f3540;
  --text: #e9ebef;
  --text-2: #a3aab7;
  --text-3: #7f8796;
  --ink-inverse: #0b0c0f;

  --accent: #8da2ff;
  --accent-ink: #0b0c0f;
  --accent-soft: rgba(141, 162, 255, .14);
  --accent-line: rgba(141, 162, 255, .45);
  --focus: #8da2ff;

  /* Change kinds: marks (bars, dots) and text (counts, badges). */
  --added: #1db071;
  --modified: #c48800;
  --removed: #cb4641;
  --added-text: #4dd495;
  --modified-text: #edba4a;
  --removed-text: #ff7d73;
  --added-soft: rgba(29, 176, 113, .15);
  --modified-soft: rgba(196, 136, 0, .17);
  --removed-soft: rgba(203, 70, 65, .17);
  --diff-add-bg: rgba(29, 176, 113, .11);
  --diff-add-word: rgba(29, 176, 113, .38);
  --diff-del-bg: rgba(203, 70, 65, .12);
  --diff-del-word: rgba(203, 70, 65, .42);
  --diff-hunk-bg: rgba(141, 162, 255, .08);

  /* File category hues (icons). */
  --cat-folder: #7fa8d6;
  --cat-model: #a497ff;
  --cat-texture: #4fc9b0;
  --cat-material: #d48ae6;
  --cat-particle: #f0a35a;
  --cat-sound: #62b4f2;
  --cat-script: #dcc56e;
  --cat-panorama: #6cc3e2;
  --cat-animation: #e9bf5a;
  --cat-video: #78a8ff;
  --cat-other: #8b97a8;

  /* Code */
  --code-string: #9fd8a8;
  --code-number: #f2b880;
  --code-key: #a9b8ff;
  --code-comment: #6f7787;
  --code-punct: #7f8796;

  --checker-a: #1a1d23;
  --checker-b: #14161b;
  --scrim: rgba(4, 5, 8, .62);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-sheet: 0 -12px 48px rgba(0, 0, 0, .5);
  --glass: rgba(17, 19, 24, .78);
  --flag-ring: rgba(255, 255, 255, .16);
  --zone-bg: #0e1017;
  --zone-line: #1d212a;
  --band-bg: #13151b;
  --scroll-thumb: #3c4350;
  --scroll-thumb-hover: #5a6373;
  --scroll-thumb-active: #77808f;
  --scroll-track: rgba(255, 255, 255, .025);
  --skeleton: #1b1e25;
  --skeleton-hi: #252a33;

  --font-ui: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", "Cascadia Mono", "JetBrains Mono", Consolas, ui-monospace, monospace;
  --font-display: "Unbounded", "Geist", "Segoe UI", system-ui, sans-serif;

  --r-xs: .25rem;
  --r-sm: .375rem;
  --r-md: .625rem;
  --r-lg: 1rem;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 120ms;
  --t-med: 180ms;
  --t-slow: 260ms;

  --topbar-h: 3.5rem;
  --tree-w: 17rem;
  --preview-w: 44vw;
  --row-h: 2.125rem;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2ef;
  --surface-1: #ffffff;
  --surface-2: #f7f7f5;
  --surface-3: #eeeeea;
  --surface-4: #e4e4df;
  --line: #e4e4df;
  --line-2: #d3d3cd;
  --text: #16171b;
  --text-2: #555a64;
  --text-3: #666b76;
  --ink-inverse: #ffffff;
  --accent: #2f55d4;
  --accent-ink: #ffffff;
  --accent-soft: rgba(47, 85, 212, .1);
  --accent-line: rgba(47, 85, 212, .4);
  --focus: #2f55d4;
  --added: #008a4e;
  --modified: #d49824;
  --removed: #c13c39;
  --added-text: #0b7a45;
  --modified-text: #8a5d00;
  --removed-text: #b42f2c;
  --added-soft: rgba(0, 138, 78, .1);
  --modified-soft: rgba(212, 152, 36, .16);
  --removed-soft: rgba(193, 60, 57, .1);
  --diff-add-bg: rgba(0, 138, 78, .08);
  --diff-add-word: rgba(0, 138, 78, .24);
  --diff-del-bg: rgba(193, 60, 57, .08);
  --diff-del-word: rgba(193, 60, 57, .24);
  --diff-hunk-bg: rgba(47, 85, 212, .06);
  --cat-folder: #4a7fb8;
  --cat-model: #6a5ae0;
  --cat-texture: #12917a;
  --cat-material: #a24fc0;
  --cat-particle: #cc6f12;
  --cat-sound: #1f7fcf;
  --cat-script: #9a7a10;
  --cat-panorama: #1f8db3;
  --cat-animation: #b0831a;
  --cat-video: #3a6fe0;
  --cat-other: #6b7686;
  --code-string: #1d7a3b;
  --code-number: #a64a0b;
  --code-key: #3446b8;
  --code-comment: #8a8f99;
  --code-punct: #737884;
  --checker-a: #ececea;
  --checker-b: #f8f8f6;
  --scrim: rgba(20, 22, 28, .38);
  --shadow-pop: 0 12px 32px rgba(20, 22, 28, .14), 0 2px 6px rgba(20, 22, 28, .08);
  --shadow-sheet: 0 -12px 48px rgba(20, 22, 28, .18);
  --glass: rgba(255, 255, 255, .82);
  --flag-ring: rgba(20, 22, 28, .16);
  --zone-bg: #e8e8e3;
  --zone-line: #dadad4;
  --band-bg: #ffffff;
  --scroll-thumb: #c2c2bb;
  --scroll-thumb-hover: #9d9e97;
  --scroll-thumb-active: #7f8079;
  --scroll-track: rgba(20, 22, 28, .035);
  --skeleton: #ececea;
  --skeleton-hi: #f6f6f4;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f2f2ef;
    --surface-1: #ffffff;
    --surface-2: #f7f7f5;
    --surface-3: #eeeeea;
    --surface-4: #e4e4df;
    --line: #e4e4df;
    --line-2: #d3d3cd;
    --text: #16171b;
    --text-2: #555a64;
    --text-3: #666b76;
    --ink-inverse: #ffffff;
    --accent: #2f55d4;
    --accent-ink: #ffffff;
    --accent-soft: rgba(47, 85, 212, .1);
    --accent-line: rgba(47, 85, 212, .4);
    --focus: #2f55d4;
    --added: #008a4e;
    --modified: #d49824;
    --removed: #c13c39;
    --added-text: #0b7a45;
    --modified-text: #8a5d00;
    --removed-text: #b42f2c;
    --added-soft: rgba(0, 138, 78, .1);
    --modified-soft: rgba(212, 152, 36, .16);
    --removed-soft: rgba(193, 60, 57, .1);
    --diff-add-bg: rgba(0, 138, 78, .08);
    --diff-add-word: rgba(0, 138, 78, .24);
    --diff-del-bg: rgba(193, 60, 57, .08);
    --diff-del-word: rgba(193, 60, 57, .24);
    --diff-hunk-bg: rgba(47, 85, 212, .06);
    --cat-folder: #4a7fb8;
    --cat-model: #6a5ae0;
    --cat-texture: #12917a;
    --cat-material: #a24fc0;
    --cat-particle: #cc6f12;
    --cat-sound: #1f7fcf;
    --cat-script: #9a7a10;
    --cat-panorama: #1f8db3;
    --cat-animation: #b0831a;
    --cat-video: #3a6fe0;
    --cat-other: #6b7686;
    --code-string: #1d7a3b;
    --code-number: #a64a0b;
    --code-key: #3446b8;
    --code-comment: #8a8f99;
    --code-punct: #737884;
    --checker-a: #ececea;
    --checker-b: #f8f8f6;
    --scrim: rgba(20, 22, 28, .38);
    --shadow-pop: 0 12px 32px rgba(20, 22, 28, .14), 0 2px 6px rgba(20, 22, 28, .08);
    --shadow-sheet: 0 -12px 48px rgba(20, 22, 28, .18);
    --glass: rgba(255, 255, 255, .82);
  --flag-ring: rgba(20, 22, 28, .16);
  --zone-bg: #e8e8e3;
  --zone-line: #dadad4;
  --band-bg: #ffffff;
  --scroll-thumb: #c2c2bb;
  --scroll-thumb-hover: #9d9e97;
  --scroll-thumb-active: #7f8079;
  --scroll-track: rgba(20, 22, 28, .035);
    --skeleton: #ececea;
    --skeleton-hi: #f6f6f4;
  }
}

@media (pointer: coarse) {
  :root { --row-h: 2.75rem; }
}