/*
 * Design tokens — Task 27 (spec 10.1).
 *
 * Base values are extracted from the prototype CSS (`../legacy/public/index.html`,
 * :root block). Where the prototype conflicts with the client-approved Sterling
 * screenshots, the screenshots are binding (spec 10.1 "binding visual source"):
 * navy header, orange CTA buttons, white cards on a light-gray background,
 * status pills Connected (green) / Disconnected (pink). The prototype's older
 * blue `--primary: #2563eb` is therefore overridden, not carried over.
 *
 * Final values are documented in PROJECT_CONTEXT.md (Task 27 decisions).
 * These tokens also drive the transactional email layout (spec 10.4, Task 31).
 */

:root {
  /* Surfaces (prototype values, unchanged) */
  --bg: #f4f6f8;
  --card: #ffffff;
  --border: #e5e7eb;
  --text: #1f2937;
  --muted: #6b7280;

  /* Sterling branding — client-approved screenshots (spec 10.1) */
  --primary: #ea580c; /* orange CTA buttons */
  --primary-hover: #c2410c;
  --primary-soft: rgba(234, 88, 12, 0.12); /* focus rings, active tab underline */
  --header-bg: #1e3a5f; /* navy header bar */
  --header-text: #ffffff;

  /* Status (prototype values; the Disconnected pill is pink per the screenshots) */
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --pill-connected-bg: #dcfce7;
  --pill-connected-text: #166534;
  --pill-disconnected-bg: #fce7f3;
  --pill-disconnected-text: #be185d;

  /* Shape (prototype values, unchanged) */
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}