/* Alyte design tokens — ONE source of truth for color, type, radius, shadow, motion.
 * Linked by every page in public/ so a brand tweak is a single-file edit (was a 6-file
 * copy-paste that had already drifted: --accent/--red/--green/--blue vs --brand/--err/--ok).
 *
 * Canonical names come first; the "compat aliases" block maps the older per-page names to
 * the canonical ones so existing markup keeps working while call sites migrate. New code
 * should use the canonical names only. */
:root{
  /* ── Brand palette (Alyte: Healthy Blue leads; Techy Green is a rare signal accent) ── */
  --almost-black:#0D0D0D; --sage:#91AA86; --white:#FFFFFF; --minty:#D2E0DA;
  --healthy-blue:#004F53; --clear-blue:#7DABAC; --techy-green:#70FF70;

  /* ── Surfaces ── */
  --canvas:#F7FAF8; --card:#FFFFFF; --sunken:#EEF3F0; --panel:#FFFFFF;

  /* ── Ink / text ── */
  --ink:#0D0D0D; --body:#232B28; --muted:#6B7B73; --subtle:#8A9A92;

  /* ── Lines ── */
  --line:#D2E0DA; --line-subtle:#E2EAE5;

  /* ── Brand roles ── */
  --brand:#004F53; --brand-hover:#003E41; --teal-50:#EAF3F3; --sage-100:#E7EDE4;

  /* ── Semantic status (distinct from the brand accent) ── */
  --ok:#3A5A32; --ok-bg:#EEF6EA; --ok-line:#B9D3AC;
  --warn:#7A5E1B; --warn-bg:#F7F1E2; --warn-line:#D9C9A3;
  --err:#B4322B; --err-bg:#FBEEEC; --err-line:#E4B4AE;

  /* ── Type ── */
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Newsreader',Georgia,serif;

  /* ── Radius / shadow / motion ── */
  --radius-md:10px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 2px 8px rgba(13,13,13,.06); --shadow-md:0 6px 20px rgba(13,13,13,.08);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ── Compat aliases (older per-page names → canonical). Kept so existing markup
   *    renders correctly; new code should use the canonical names above. ── */
  --accent:var(--brand);        /* dashboard used --accent */
  --red:var(--err);             /* suppliers/dashboard/console used --red */
  --green:var(--ok);            /* dashboard/console used --green (was #1F8A5B) */
  --blue:var(--clear-blue);     /* dashboard's Flow view referenced --blue (undefined) */
  --amber:var(--warn);          /* dashboard used --amber */
  --green-ink:#0D3D14;          /* console: dark-green ink on the techy-green "won" chip */
  --panel:var(--card);          /* dashboard used --panel */
}

/* ── Shared a11y baseline (Phase 4 polish), applied on every page via this stylesheet ── */
/* A visible keyboard-focus ring on interactive elements — keyboard users can see where
 * they are. :focus-visible so it doesn't show on mouse clicks. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Respect the OS "reduce motion" preference — kill animations/transitions for users who
 * asked for less motion (vestibular safety). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}