/* ============================================================
   OpsPal — Color tokens
   Harmonized with the OpsPal logo: deep teal-navy + green,
   on a cool light-slate neutral base. Light theme only.
   ============================================================ */

:root {
  /* ---- Neutral base (cool slate) ---- */
  --bg: #f8fafc;             /* page background */
  --panel: #ffffff;          /* primary surface / cards */
  --panel-strong: #f1f5f9;   /* recessed / secondary surface */
  --text: #1e293b;           /* body + headings */
  --muted: #475569;          /* secondary text, labels */
  --border: rgba(148, 163, 184, 0.4);   /* hairline dividers, card edges */

  /* ---- Brand core (from the logo) ---- */
  --ink: #0e3d49;            /* deep teal-navy — big numbers, phase digits, emphasis */
  --ink-soft: #2f5c6d;       /* logo navy — secondary emphasis, mono text */
  --green: #1f7a43;          /* accessible logo green — accents on light */
  --green-bright: #4ba528;   /* logo highlight green — sparingly, gradients only */

  /* ---- Accent (teal action color) ---- */
  --accent: #0f766e;         /* interactive / hover borders / links */
  --accent-text: #115e59;    /* accent text on light (AA safe) */

  /* ---- Indigo (secondary / internal-product marker) ---- */
  --brand: #4f46e5;
  --brand-dark: #4338ca;     /* primary button fill */

  /* ---- Surfaces / washes ---- */
  --surface-light: #ffffff;
  --surface-muted: #f1f5f9;
  --surface-tint: #ecfdf6;   /* soft teal wash — highlight bands */

  /* ---- Semantic status ---- */
  --status-named: #1f7a43;       /* success / named client */
  --status-named-bg: rgba(31, 122, 67, 0.12);
  --status-active: #b45309;      /* in-progress / warning */
  --status-active-bg: rgba(245, 158, 11, 0.14);
  --status-public: #115e59;      /* public / info */
  --status-public-bg: rgba(15, 118, 110, 0.12);
  --status-internal: #4338ca;    /* internal product */
  --status-internal-bg: rgba(99, 102, 241, 0.12);
  --danger: #dc2626;             /* excluded / error */

  /* ---- Elevation ---- */
  --shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
  --shadow-hover: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* ---- Semantic aliases ---- */
  --text-heading: var(--text);
  --text-body: var(--text);
  --text-muted: var(--muted);
  --text-accent: var(--accent-text);
  --surface-card: var(--panel);
  --surface-page: var(--bg);
  --link: var(--accent);
}