/* Forge — colour tokens.
   Base palette (raw brand values) + semantic aliases that drive every
   component. Light theme on :root, dark theme on [data-theme="dark"].
   Accent is a SWAPPABLE per-product token: override --accent / --accent-hover
   / --accent-bg-soft on a product root to re-tint the whole system. */
:root {
  /* ── Brand rosette — the five mark dots (rendered at 92% on the logo) ── */
  --brand-blue:     #5b8def;
  --brand-indigo:   #7c69e0;
  --brand-pink:     #e07ab0;
  --brand-amber:    #e89e5b;
  --brand-green:    #5db98a;

  /* ── Ink & neutrals ── */
  --brand-ink:      #1d1d1f;   /* primary text */
  --ink-secondary:  #6e6e73;
  --ink-tertiary:   #86868b;
  --brand-bone:     #f5f5f7;   /* sunken background */
  --brand-white:    #ffffff;   /* raised surface */
  --brand-midnight: #0a0a1a;   /* brand dark */

  /* ── Semantic surfaces (light) ── */
  --bg: #f5f5f7;               /* app canvas / sunken */
  --bg-elev: #ffffff;          /* cards, panels */
  --bg-elev-2: #ffffff;
  --bg-sidebar: rgba(245, 245, 247, 0.72);
  --bg-row-hover: rgba(0, 0, 0, 0.04);
  --bg-row-selected: rgba(91, 141, 239, 0.12);
  --bg-input: rgba(255, 255, 255, 0.8);
  --bg-chip: rgba(0, 0, 0, 0.05);

  /* ── Borders / hairlines ── */
  --border: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.10);
  --hairline: rgba(0, 0, 0, 0.05);

  /* ── Text ── */
  --fg: #1d1d1f;
  --fg-muted: #6e6e73;
  --fg-subtle: #a1a1a6;
  --fg-mono: #515154;

  /* ── Accent (swappable per product) — Forge default = brand blue ── */
  --accent: #5b8def;
  --accent-hover: #4a7adf;
  --accent-fg: #ffffff;
  --accent-bg-soft: rgba(91, 141, 239, 0.12);

  /* ── Accent gradient — blue → indigo (used sparingly, marketing only) ── */
  --accent-grad: linear-gradient(135deg, #5b8def, #7c69e0);   /* @kind other */
  --brand-gradient: linear-gradient(135deg, #5b8def, #7c69e0); /* @kind other */

  /* ── Semantic status ── */
  --good: #5db98a;
  --warn: #e89e5b;
  --bad:  #b3261e;             /* destructive — true red for clear danger */
  --info: #5b8def;
  --good-soft: rgba(93, 185, 138, 0.14);
  --warn-soft: rgba(232, 158, 91, 0.16);
  --bad-soft:  rgba(179, 38, 30, 0.12);
  --info-soft: rgba(91, 141, 239, 0.14);
}

[data-theme="dark"] {
  /* Neutral dark grays for chrome — Midnight reads too blue when tiled.
     Brand colour returns via the indigo accent + the rosette mark itself. */
  --bg: #141416;
  --bg-elev: #1c1c1e;
  --bg-elev-2: #2c2c2e;
  --bg-sidebar: rgba(28, 28, 30, 0.72);
  --bg-row-hover: rgba(255, 255, 255, 0.06);
  --bg-row-selected: rgba(124, 105, 224, 0.20);
  --bg-input: rgba(118, 118, 128, 0.18);
  --bg-chip: rgba(255, 255, 255, 0.08);

  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);
  --hairline: rgba(255, 255, 255, 0.06);

  --fg: #f5f5f7;
  --fg-muted: #98989d;
  --fg-subtle: #6e6e73;
  --fg-mono: #c7c7cc;

  --accent: #7c69e0;          /* indigo is brand-forward on dark gray */
  --accent-hover: #9385e8;
  --accent-fg: #ffffff;
  --accent-bg-soft: rgba(124, 105, 224, 0.20);
  --accent-grad: linear-gradient(135deg, #7c69e0, #5b8def); /* @kind other */

  --good: #5db98a;
  --warn: #e89e5b;
  --bad:  #ff6b61;
  --info: #7c69e0;
  --good-soft: rgba(93, 185, 138, 0.18);
  --warn-soft: rgba(232, 158, 91, 0.20);
  --bad-soft:  rgba(255, 107, 97, 0.16);
  --info-soft: rgba(124, 105, 224, 0.20);
}