/* ── Typework v2 color system ────────────────────────────────────────
 * Two palettes, one rule: MONOCHROME (black / white / grey + a single
 * warm orange) carries the product; a 6-stop RAINBOW carries the brand and
 * appears ONLY on the logo mark and the one active/selected icon. The
 * rainbow is precious — never on buttons, fills, backgrounds, or body text.
 * Base values first, semantic aliases second.
 * ------------------------------------------------------------------- */
:root {
  /* ── Light surfaces & ink ramp ─────────────────────────────── */
  --bg-canvas: #FFFFFF;
  --bg-panel: #FFFFFF;
  --bg-sunken: #F4F4F5;
  --bg-paper: #FAFAFA;
  --ink: #0A0A0B;     /* primary text, black buttons               */
  --ink-2: #2A2A2E;
  --ink-3: #6B6B70;   /* secondary text, idle icons on light       */
  --ink-4: #A1A1A6;   /* placeholder / muted                       */
  --ink-5: #D4D4D8;   /* disabled                                  */
  --line: #EAEAEC;    /* hairline border                           */
  --line-2: #DCDCDF;  /* stronger divider                          */

  /* ── Dark scale (nav rail, dark surfaces) ──────────────────── */
  --dark-0: #0A0A0B;  /* rail base                                 */
  --dark-1: #131316;
  --dark-2: #1A1A1D;  /* hover                                     */
  --dark-3: #232327;  /* active row                                */
  --dark-4: #2C2C31;
  --dark-5: #3A3A3F;
  --dark-line: #232327;
  --dark-ink: #F4F4F5;    /* primary text on dark                  */
  --dark-ink-2: #D4D4D8;
  --dark-ink-3: #8E8E93;  /* idle icon / label on dark             */
  --dark-ink-4: #5C5C61;  /* ghost                                 */

  /* ── THE accent — single warm orange ───────────────────────── */
  --accent: #FF6A1A;
  --accent-2: #FF8A3D;
  --accent-soft: rgba(255, 106, 26, 0.14);
  --accent-softer: rgba(255, 106, 26, 0.06);

  /* ── Rainbow highlight — 6 stops (logo + active icon ONLY) ─── */
  --rb-1: #2C7BFF; /* @kind color */
  --rb-2: #1FB9A0; /* @kind color */
  --rb-3: #4FCB57; /* @kind color */
  --rb-4: #F2C82F; /* @kind color */
  --rb-5: #FF6A1A; /* @kind color */
  --rb-6: #E83A6A; /* @kind color */

  /* ── Semantic state colors (drawn from the spectrum) ───────── */
  --success: #1FA463;
  --warning: #F2A30F;
  --danger: #E83A4A;
  --info: #2C7BFF;

  /* ════════════════════════════════════════════════════════════
   * SEMANTIC ALIASES — prefer these
   * ════════════════════════════════════════════════════════════ */
  --text-strong: var(--ink);
  --text-body: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-placeholder: var(--ink-4);
  --text-disabled: var(--ink-5);
  --text-on-dark: var(--dark-ink);
  --text-on-dark-muted: var(--dark-ink-3);

  --surface-canvas: var(--bg-canvas);
  --surface-card: var(--bg-panel);
  --surface-sunken: var(--bg-sunken);
  --surface-paper: var(--bg-paper);
  --surface-sidebar: var(--dark-0);

  --border-default: var(--line);
  --border-divider: var(--line);
  --border-strong: var(--line-2);

  --focus-ring: var(--accent);
  --focus-ring-dark: var(--dark-ink-3);

  /* ── v1 compat aliases (old token names → v2 values) ───────── */
  --text-secondary: var(--ink-2);
  --tw-action: var(--ink);
  --tw-action-idle: var(--ink-5);
  --tw-near-black: var(--ink);
  --tw-ink: var(--ink);
  --tw-ink-soft: var(--dark-3);
  --tw-border-strong: var(--line-2);
  --tw-grey-90-60: var(--dark-ink-3);
  --tw-grey-34: var(--dark-ink-4);
  --tw-badge-active: var(--dark-4);
  --tw-orange: var(--accent);
  --tw-orange-deep: var(--accent-2);
  --accent-hover: var(--accent-2);
  --tw-orange-tint: var(--accent-soft);
  --tw-orange-glow: var(--accent-soft);
  --tw-success: var(--success);
  --tw-warning: var(--warning);
  --tw-danger: var(--danger);
  --tw-info: var(--info);
}