/*
  @name Accent
  @description The dumpsterfire look: warm whites, flame orange and an ember-dark mode
  @swatches #fbf6f2 #d84315 #fb8c00 #ffffff
  @swatches-dark #22100b #ff6d00 #ffa726 #170905

  Colours come from the logo: the flame (#f44336 red, #ff6d00 / #ff9800 orange) and the app icon's
  background (#310f09 ember). Icons stay neutral; only folders get the flame colour.
*/
:root {
  --icon-ink: #3d2a24;
  --icon-folder: #fb8c00;
  --icon-accent: #7a625a;
  --icon-danger: #e53935;
  --icon-paper: #ffffff;
  --face: #fbf6f2;
  --light: #fffaf7;
  --hilite: #ffffff;
  --shadow: #eadfd8;
  --dark: #cdbdb3;
  --text: #2a1712;
  --muted: #7a625a;
  --field: #ffffff;
  --sel: #d84315;
  --sel-text: #ffffff;
  --hover: #ffeadb;
  --title: #ffffff;
  --title-text: #2a1712;
  --title-inactive: #f7f0ea;
  --disabled: #b8a9a2;
  --error: #d32f2f;
  --veil: rgba(255, 109, 0, 0.08);
  --gutter: #f5ede7;
  --note: #fff9c4;
  --track: #f3ebe5;
  --stage: #1a0a06;
  --radius: 6px;
  --win-shadow: 0 10px 30px rgba(49, 15, 9, 0.14);
  --font: 14px "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: 13px "Cascadia Code", Consolas, monospace;
}

:root[data-mode="dark"] {
  --icon-ink: #f0dcd2;
  --icon-folder: #ffa726;
  --icon-accent: #c4a89c;
  --icon-danger: #ff6b5b;
  --icon-paper: #2e1610;
  --face: #22100b;
  --light: #2e1610;
  --hilite: #3d1f17;
  --shadow: #3d1f17;
  --dark: #6b4336;
  --text: #f7ebe4;
  --muted: #c4a89c;
  --field: #170905;
  --sel: #ff6d00;
  --sel-text: #1a0905;
  --hover: #3a1a10;
  --title: #22100b;
  --title-text: #f7ebe4;
  --title-inactive: #1c0c08;
  --disabled: #6e5248;
  --error: #ff8a80;
  --veil: rgba(255, 109, 0, 0.12);
  --gutter: #1c0c08;
  --note: #3d2f12;
  --track: #22100b;
  --stage: #0d0503;
  --win-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

/* selected text in flame colours */
::selection { background: #ffcc80; color: #2a1712; }
:root[data-mode="dark"] ::selection { background: #ff6d00; color: #1a0905; }

/* scrollbars warm up when you grab them */
::-webkit-scrollbar-thumb:hover { background-color: var(--sel); }