/* The UI roles `src/dashboard/ui/styles.ts` renders from, answered by every theme.
 *
 * ─── WHY THIS FILE EXISTS SEPARATELY ─────────────────────────────────────────────────
 *
 * `styles.ts` used to inline Nocturne's own values — `nocturneRamp.neutral[200]`,
 * `nocturneColor.bg`. That was correct while Nocturne was the only theme and it became wrong
 * the moment a second one arrived: an inline value does not follow a stylesheet, so applying
 * Ledger would have repainted everything driven by CSS classes and left this app's own chrome
 * dark-on-light.
 *
 * A STATUS CHIP is two treatments, not five: accent for an overdue invoice, neutral for
 * everything else. Nocturne's five differ by a ramp step or two, and that nuance does not survive
 * a theme that has no ramps — so the two that carry meaning are named and the rest is dropped.
 *
 * These are not in `nocturne.css` because that file is a BYTE-EXACT copy of the design system's
 * export and `tokens.test.ts` proves it. Adding a line to it — even a good line — breaks the one
 * check that keeps the palette honest. They are not in `ledger.css` or `cream.css` either,
 * because three copies of the same nine names is three places to get out of step.
 *
 * ─── WHERE THE VALUES COME FROM ──────────────────────────────────────────────────────
 *
 * Nocturne's are its own tonal ramp steps, copied from `nocturne.css`.
 * Ledger's and Cream's are Claude Design's own, from the `THEMES` map in `Poke Screens v3.dc.html`.
 *
 * NOTHING HERE IS BLENDED, DERIVED OR GUESSED. Claude Design gave Ledger and Cream a palette but
 * no 100–900 tonal ramps, so where Nocturne answers a role with a ramp step, Ledger and Cream
 * answer it with the role Claude Design supplied for that job. That is a mapping between two
 * vocabularies, and every line below names the source it came from so it can be checked.
 */

:root,
:root[data-theme="nocturne"] {
  --ui-text-strong: #f3f5fe;      /* nocturne.css --color-neutral-100 */
  --ui-text-muted: #e4e7f5;       /* nocturne.css --color-neutral-200 */
  --ui-text-dim: #cfd3e5;         /* nocturne.css --color-neutral-300 */
  --ui-border: #3f424d;           /* nocturne.css --color-neutral-800 */
  --ui-border-strong: #595d6c;    /* nocturne.css --color-neutral-700 */
  --ui-ground-sunken: #292b31;    /* nocturne.css --color-neutral-900 */
  --ui-accent-border: #5d5294;    /* nocturne.css --color-accent-700 */
  --ui-accent-fill: #2b2741;      /* nocturne.css --color-accent-900 */
  --ui-accent-text: #e7e5fe;      /* nocturne.css --color-accent-200 */
  --ui-status-neutral-fill: #292b31; /* nocturne.css --color-neutral-900 */
  --ui-status-neutral-border: #595d6c; /* nocturne.css --color-neutral-700 */
  --ui-status-neutral-text: #e4e7f5; /* nocturne.css --color-neutral-200 */
}

:root[data-theme="ledger"] {
  --ui-text-strong: #101318;              /* Claude Design --color-text */
  --ui-text-muted: #4d5460;               /* Claude Design --color-text-muted */
  --ui-text-dim: #7b8492;                 /* Claude Design --color-text-dim */
  --ui-border: rgba(16,19,24,0.13);       /* Claude Design --color-rule */
  --ui-border-strong: #7b8492;            /* Claude Design --color-text-dim */
  --ui-ground-sunken: #eef1f4;            /* Claude Design --color-surface-2 */
  --ui-accent-border: #959dcd;            /* Claude Design --color-accent-dim */
  --ui-accent-fill: rgba(51,65,143,0.06); /* Claude Design --color-accent-wash */
  --ui-accent-text: #33418f;              /* Claude Design --color-accent */
  --ui-status-neutral-fill: #eef1f4; /* Claude Design --color-surface-2 */
  --ui-status-neutral-border: rgba(16,19,24,0.13); /* Claude Design --color-rule */
  --ui-status-neutral-text: #4d5460; /* Claude Design --color-text-muted */
}

:root[data-theme="cream"] {
  --ui-text-strong: #221f2b;                /* Claude Design --color-text */
  --ui-text-muted: #5b5766;                 /* Claude Design --color-text-muted */
  --ui-text-dim: #8a8594;                   /* Claude Design --color-text-dim */
  --ui-border: rgba(34,31,43,0.12);         /* Claude Design --color-rule */
  --ui-border-strong: #8a8594;              /* Claude Design --color-text-dim */
  --ui-ground-sunken: #f6f1e8;              /* Claude Design --color-surface-2 */
  --ui-accent-border: #b0a7e2;              /* Claude Design --color-accent-dim */
  --ui-accent-fill: rgba(107,92,196,0.08);  /* Claude Design --color-accent-wash */
  --ui-accent-text: #6b5cc4;                /* Claude Design --color-accent */
  --ui-status-neutral-fill: #f6f1e8; /* Claude Design --color-surface-2 */
  --ui-status-neutral-border: rgba(34,31,43,0.12); /* Claude Design --color-rule */
  --ui-status-neutral-text: #5b5766; /* Claude Design --color-text-muted */
}