/* ============================================================
   LUKI — Color tokens (dark / "Modo noche" — default)
   Neutral charcoal canvas. The fox orange lives ONLY in the logo
   and the primary action; everything else works in teal + neutrals.
   Base values first, then semantic aliases.
   ============================================================ */
:root {
  /* ---- Surfaces (neutral charcoal, close in tone for hierarchy) ---- */
  --mic-bg-main: #242b2d;       /* general app background */
  --mic-bg-sidebar: #1c2226;    /* left rail */
  --mic-bg-card: #1c2226;       /* content card — BRAND surface #1C2226 */
  --mic-bg-card-soft: #141a1d;  /* sub-surface: inputs, inner tiles */
  --mic-bg-active: #2a3336;      /* active sidebar item */
  --mic-bg-hover: #2f393c;       /* row / item hover fill */
  --mic-bg-ghost-hover: #212a2c; /* ghost & secondary button hover */
  --mic-bg-secondary: #12181b;   /* secondary button base */
  --mic-bg-elevated: #1a2124;    /* elevated panels: nav flyouts, modal rails */

  /* ---- Teal (the working accent — "primario" #5BB8B1) ---- */
  --mic-accent: #5bb8b1;         /* accent · active · links · metrics */
  --mic-accent-strong: #45b0a8;  /* saturated: gradients, big metrics */
  --mic-accent-hover: #74c6c0;   /* accent hover */
  --mic-accent-ink: #0c2321;     /* text/icon ON a teal fill */
  --mic-accent-dim: #8ccfc9;     /* muted teal */

  /* Translucent teal washes */
  --mic-accent-wash: rgba(91, 184, 177, 0.10);   /* soft teal fill */
  --mic-accent-wash-2: rgba(91, 184, 177, 0.14);
  --mic-accent-border: rgba(91, 184, 177, 0.32);
  --mic-accent-halo: rgba(91, 184, 177, 0.35); /* focus ring */
  --mic-accent-soft-bg: rgba(91, 184, 177, 0.12);       /* soft teal fill: active nav, pinned pin */
  --mic-accent-soft-border: rgba(91, 184, 177, 0.32); /* soft teal border on active items */

  /* ---- Fox orange (the BRAND — logo + primary action ONLY) ---- */
  --mic-brand: #f0603a;          /* primary CTA fill · logo accent */
  --mic-brand-strong: #e8542e;   /* pressed / saturated brand */
  --mic-brand-hover: #ff7a55;    /* primary button hover */
  --mic-brand-ink: #2a0a02;      /* text/icon ON an orange fill */
  --mic-brand-wash: rgba(240, 96, 58, 0.12);
  --mic-brand-border: rgba(240, 96, 58, 0.35);

  /* ---- Text ---- */
  --mic-text-main: #e9edee;      /* BRAND text #E9EDEE */
  --mic-text-muted: #b7c0c1;
  --mic-text-faint: #96a1a2;
  --mic-text-dim: #667173;

  /* ---- Borders ---- */
  --mic-border-soft: #2f393c;
  --mic-border-faint: #232b2e;
  --mic-border-dashed: #41504f;

  /* ---- Semantic state (semáforo) ---- */
  --mic-ok: #2e8b47;             /* active / resolved fill */
  --mic-ok-text: #7ccf8c;
  --mic-warning: #a97614;        /* pending */
  --mic-warning-strong: #c29225; /* timeline / header hover */
  --mic-warning-text: #e8c06a;   /* sand metric values */
  --mic-danger: #b03a2e;         /* blocked */
  --mic-danger-btn: #b04a3e;     /* danger button base */
  --mic-danger-btn-hover: #c25a4e;
  --mic-error: #e0685c;          /* error text & dots */
  --mic-error-strong: #f08a80;

  /* ---- Info / links ---- */
  --mic-info: #4aa5ff;           /* secondary links, blue metrics */
  --mic-info-soft: #8db1ff;      /* "updated" badges */

  /* Scrollbar */
  --mic-scroll-thumb: #374446;
  --mic-scroll-thumb-hover: #465558;
}