/* Design tokens. Light = "paper", dark = "darkroom". Brand gradient sampled from the1-mark.png. */
:root {
  --a: #ff711c;            /* mark orange (sampled 255,113,28) */
  --b: #ff3131;            /* mark red    (sampled 255,49,49)  */
  --grad: linear-gradient(100deg, var(--a), var(--b));
  --on-grad: #1b0d05;      /* ink on the gradient: 7:1+ on both stops */

  --f-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --f-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --r-s: 8px; --r-m: 12px; --r-l: 18px;
  --tap: 44px;
  --left-w: 304px; --right-w: 336px; --tab-h: 60px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  color-scheme: light;
  --canvas: #efe8dd;  --dot: #cfc4b4;
  --panel: #fbf8f3;   --surface: #ffffff; --sunken: #f3ede4;
  --card: #ffffff;    --card-line: #ded4c6;
  --ink: #1d1915;     --muted: #675e55;  --faint: #766c62;
  --line: #e4dccf;    --edge: #b3a695;
  --ok: #1a7f44;      --bad: #d3281f;    --pend: #7d7368;  --on-bad: #ffffff;
  /* A node a run is executing right now. Deliberately NOT --a/--b (the brand accent, used for
     selection) and not --bad (failure): "busy", "broken" and "selected" must not read alike at
     canvas zoom. Matches the desktop GUI's RUNNING, crates/auteur-gui/src/node_style.rs 0x4f7cc4. */
  --run: #2f6fc4;
  /* A checkpoint the run is stopped at: a person has to decide before anything past it executes.
     Amber, because the three states it must not be confused with already own the other colours:
     --run is busy, --bad is broken, --ok is finished, --pend is not started, --a/--b is selected. */
  --hold: #9a5a00;
  --focus: #b8420a;
  --k-text: #5163d6;  --k-script: #8a4fd0; --k-image: #0c9482; --k-video: #cf3b86; --k-audio: #b8860b;
  --shadow: 0 1px 2px rgb(60 40 20 / .08), 0 8px 24px rgb(60 40 20 / .10);
  --region: #8f8272;       /* 1px region border: 3.0:1+ against canvas and panel */
  --show-full: block; --show-mark: none;   /* which logo lockup is visible */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0e0c0a;  --dot: #38322b;
  --panel: #25201b;   --surface: #2e2822; --sunken: #181410;
  --card: #2a251f;    --card-line: #463e35;
  --ink: #f4ede4;     --muted: #ada194;  --faint: #a2978a;
  --line: #3f382f;    --edge: #6a5f52;
  --ok: #4cc27f;      --bad: #ff6b60;    --pend: #9a8f82;  --on-bad: #1f0605;
  --run: #7ba7ea;     /* the light-mode blue, lifted for a dark canvas */
  --hold: #f0b23c;    /* the light-mode amber, lifted so "stopped for a decision" reads on a dark card */
  --focus: #ffa565;
  --k-text: #8c9bff;  --k-script: #c093ff; --k-image: #3fd0bb; --k-video: #ff7db6; --k-audio: #f0bd45;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .45);
  --region: #7a6c5d;       /* 3.8:1 vs canvas, 3.2:1 vs panel */
  --show-full: none; --show-mark: flex;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0e0c0a;  --dot: #38322b;
    --panel: #25201b;   --surface: #2e2822; --sunken: #181410;
    --card: #2a251f;    --card-line: #463e35;
    --ink: #f4ede4;     --muted: #ada194;  --faint: #a2978a;
    --line: #3f382f;    --edge: #6a5f52;
    --ok: #4cc27f;      --bad: #ff6b60;    --pend: #9a8f82;  --on-bad: #1f0605;
    --run: #7ba7ea;
    --hold: #f0b23c;
    --focus: #ffa565;
    --k-text: #8c9bff;  --k-script: #c093ff; --k-image: #3fd0bb; --k-video: #ff7db6; --k-audio: #f0bd45;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .45);
    --region: #7a6c5d;
    --show-full: none; --show-mark: flex;
  }
}