/* Wireslate — Color system
   Ink + paper + four functional "wire" colors. Light is the default;
   the .dark scope inverts neutrals and brightens the wire hues.
   Green is functional (revenue/positive money) only — never decorative.
   Costs are red. */

:root {
  /* ---- Neutrals & surfaces (light) ---- */
  --ink: #080436;          /* primary text, dark surfaces, logo stroke, primary btn */
  --ink-soft: #373363;     /* secondary text / body copy */
  --muted: #8C8C8C;        /* captions, meta */
  --muted-warm: #9A948A;   /* eyebrow / tiny-caps on paper */
  --paper: #F6F3EC;        /* page background — "the board" */
  --paper-deep: #ECE8DE;   /* section transitions, deeper bands */
  --card: #FFFFFF;         /* cards, nav clusters */
  --node-card: #FFFDF9;    /* funnel node tables (slightly warm white) */
  --ink-tint: #EFEDF6;     /* neutral chip / check backgrounds */
  --line: #E6E2D8;         /* hairline borders */
  --border-soft: rgba(8, 4, 54, 0.06);
  --border: rgba(8, 4, 54, 0.08);
  --slate: #080436;        /* "the canvas at work" + closing CTA bands */
  --dot-grid: rgba(8, 4, 54, 0.14);   /* board texture — visible but quiet (see §6.3) */

  /* ---- The four functional / "wire" colors ----
     Each: base · soft bg · border tint · deep text (for text on light tints). */
  --blue: #4B86E6;   --blue-soft: #EAF1FD;   --blue-border: #CFE0FB;   --blue-text: #2F5B94;
  --amber: #F6B63C;  --amber-soft: #FDF1D8;  --amber-border: #F0DCAE;  --amber-text: #A8741F;
  --red: #F4374C;    --red-soft: #FDECEE;    --red-border: #FFD3DD;    --red-text: #A30F22;
  --green: #1F9D57;  --green-soft: #EFFBF5;  --green-border: #BCEBD8;  --green-text: #14A66C;

  /* ---- Node category top-accent strokes (mirror the product app) ---- */
  --cat-traffic: #2F8FE8;
  --cat-page: #FEB95F;
  --cat-conversion: #1F9D57;
  --cat-email: #7C5CF0;
  --cat-cost: #F71735;

  /* ---- Semantic aliases ---- */
  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--muted);
  --text-eyebrow: var(--muted-warm);
  --surface-page: var(--paper);
  --surface-deep: var(--paper-deep);
  --surface-card: var(--card);
  --surface-node: var(--node-card);
  --surface-slate: var(--slate);
  --accent: var(--amber);          /* primary accent / highlight */
  --money-positive: var(--green);
  --money-negative: var(--red);
}

/* ---- Dark mode ----
   Keep the four hues, brighten for contrast on dark; invert neutrals.
   Apply with class="dark" on a wrapper (or :root). */
:root.dark,
.dark {
  --ink: #F4F2FB;
  --ink-soft: #B6B1D8;
  --muted: #8D88BF;
  --muted-warm: #8D88BF;
  --paper: #0C0A1A;
  --paper-deep: #131029;
  --card: #181430;
  --node-card: #1E1A3C;
  --ink-tint: #262150;       /* raised chip */
  --line: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.12);
  --slate: #0A0720;          /* slate bands deepen so they stay distinct */
  --dot-grid: rgba(255, 255, 255, 0.15);

  --blue: #6FA0F0;   --blue-soft: #16233E;
  --amber: #FBC76A;  --amber-soft: #2C2410;
  --red: #FB6173;    --red-soft: #2E1820;
  --green: #34D17E;  --green-soft: #11281D;

  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--muted);
}