/* ============================================================
   LiveSOP — Color tokens
   Extracted verbatim from LiveSOP.fig (Components ▸ Colors frame
   + measured usage). Light theme. Hex values are exact.
   ============================================================ */
:root {
  /* ---- Brand blue ---- */
  --ls-blue: #4a90e2;          /* rgb(74,144,226) — primary CTA / buttons */
  --ls-blue-600: #2d91e9;      /* rgb(45,145,233) — links, active accents */
  --ls-blue-550: #3892eb;      /* rgb(56,146,235) */
  --ls-blue-strong: #114bf7;   /* rgb(17,75,247)  — pressed / emphatic */
  --ls-navy: #26304e;          /* rgb(38,48,78)   — dark surface / sidebar */
  --ls-blue-soft: #eaf4fd;     /* rgb(234,244,253)— tinted fill / hover */

  /* ---- Ink / text ---- */
  --ls-ink: #2f2f2f;           /* rgb(47,47,47)   — primary body text */
  --ls-headline: #323339;      /* rgb(50,51,57)   — headlines */
  --ls-ink-70: #707070;        /* rgb(112,112,112)— secondary text */
  --ls-muted: #6e7488;         /* rgb(110,116,136)— muted / meta */
  --ls-dim: #8a8e9b;           /* rgb(138,142,155)— placeholder / disabled */
  --ls-on-dark: #ffffff;

  /* ---- Neutrals / surfaces ---- */
  --ls-white: #ffffff;
  --ls-surface: #ffffff;       /* cards, inputs */
  --ls-surface-2: #f9fafb;     /* rgb(249,250,251)— subtle raised */
  --ls-surface-3: #fcfdfd;     /* rgb(252,253,253) */
  --ls-canvas: #f7f5f2;        /* app canvas (warm off-white) */

  /* ---- Borders / lines ---- */
  --ls-border: #cdced3;        /* rgb(205,206,211)— default input/card stroke */
  --ls-border-2: #d9dbe3;      /* rgb(217,219,227)— soft divider */
  --ls-border-3: #e8e8e8;      /* rgb(232,232,232)— light fill/divider */
  --ls-border-4: #ebebeb;      /* rgb(235,235,235) */

  /* ---- Semantic ---- */
  --ls-red: #e30000;           /* rgb(227,0,0)    — error / destructive */
  --ls-red-soft: #ea4f4f;      /* softer red */
  --ls-orange: #fa8e6c;        /* rgb(250,142,108)— warning stroke / delay */
  --ls-green: #72bf7e;         /* rgb(114,191,126)— success / active */
  --ls-amber: #f5a623;         /* warning / standby */

  /* ---- Semantic aliases ---- */
  --text-strong: var(--ls-headline);
  --text-body: var(--ls-ink);
  --text-secondary: var(--ls-ink-70);
  --text-muted: var(--ls-muted);
  --text-placeholder: var(--ls-dim);
  --text-link: var(--ls-blue-600);

  --surface-card: var(--ls-surface);
  --surface-canvas: var(--ls-canvas);
  --surface-sunken: var(--ls-surface-2);

  --border-default: var(--ls-border);
  --border-soft: var(--ls-border-2);
  --border-divider: var(--ls-border-3);

  --accent: var(--ls-blue);
  --accent-hover: var(--ls-blue-600);
  --accent-pressed: var(--ls-blue-strong);
  --accent-soft: var(--ls-blue-soft);

  --danger: var(--ls-red);
  --warning: var(--ls-orange);
  --success: var(--ls-green);
}