/* tokens.css — single source of truth for the Agency Dashboard + Spider.
   Light-only; structured so a dark mode can be added later by overriding
   the semantic layer under a [data-theme="dark"] selector.
   Loaded BEFORE style.css so its primitives are available to consumers. */
:root{
  /* ---- Primitive: Navy (blue) brand base (brand base, sidebar, primary) ---- */
  --navy-900:#16243f; --navy-800:#1b2a4a; --navy-700:#24375e;
  /* ---- Primitive: Blue (secondary / links / focus) ---- */
  --teal-50:#eef3fa; --teal-500:#2f5c99; --teal-700:#234b7a;
  /* ---- Primitive: Orange (accent — measured use only) ---- */
  --orange-50:#fef4e4; --orange-500:#f0a12b; --orange-700:#b5740e;
  /* ---- Primitive: Gray neutrals ---- */
  --gray-50:#f7f9fc; --gray-100:#eef1f6; --gray-200:#e2e8f0; --gray-300:#cbd3df;
  --gray-400:#97a2b4; --gray-500:#66748c; --gray-600:#46536a; --gray-700:#333e52;
  --gray-800:#1f2738; --gray-900:#131a28;
  /* ---- Primitive: Status ---- */
  --green-600:#16A34A; --amber-500:#f0a12b; --red-600:#DC2626; --red-500:#EF4444;

  /* ---- Semantic roles (light). style.css :root also maps its legacy
     names onto these same values; both agree. ---- */
  --surface:#FFFFFF; --surface-2:var(--gray-50);
  --border-strong:var(--gray-300);
  --text-on-dark:#FFFFFF;
  --primary-hover:var(--navy-800); --primary-active:var(--navy-700); --primary-fg:#FFFFFF;
  --accent:var(--orange-500); --accent-strong:var(--orange-700); --accent-soft:var(--orange-50);
  --link:var(--teal-700); --secondary:var(--teal-500); --secondary-soft:var(--teal-50);
  --ring:var(--teal-500);
  --sidebar-active-bar:var(--orange-500);

  /* ---- Spacing (4px base) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  /* ---- Typography ---- */
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px; --fs-xl:20px;
  --fs-2xl:24px; --fs-3xl:30px; --fs-4xl:36px;
  --lh-tight:1.25; --lh-normal:1.5;
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  /* ---- Radius ---- */
  --r-sm:4px; --r:6px; --r-lg:8px; --r-xl:12px; --r-full:9999px;
  /* ---- Elevation (navy-tinted, soft) ---- */
  --sh-sm:0 1px 2px rgba(19,26,40,.05);
  --sh:0 1px 3px rgba(19,26,40,.10);
  --sh-md:0 4px 8px rgba(19,26,40,.10);
  --sh-lg:0 10px 20px rgba(19,26,40,.10);
  --sh-xl:0 20px 30px rgba(19,26,40,.12);
  /* ---- Motion ---- */
  --t-fast:150ms; --t:200ms; --t-slow:300ms;
  /* ---- Z-index ladder ---- */
  --z-dropdown:1000; --z-sticky:1100; --z-modal:1200; --z-popover:1300; --z-tooltip:1400;
}

/* ---- Base accessibility primitives (shared by app + spider) ---- */
*:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; inset-inline-start:8px; top:-48px; z-index:var(--z-tooltip);
  background:var(--surface); color:var(--text, #131a28);
  padding:8px 16px; border-radius:6px; box-shadow:var(--sh-md);
  transition:top var(--t);
}
.skip-link:focus{ top:8px; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
}