/* KLIP admin design tokens — the single :root layer the whole admin UI reads.
   The palette, geometry, motion, type and z-scale below are ported VERBATIM
   from the archbot design system (archbot/static/css/tokens.css), including
   its one deliberate AA correction: --text-faint carries archbot's lightened
   value, not the darker pre-AA one it replaced, which read below the WCAG AA
   4.5:1 floor on these dark surfaces. Never regress it.

   Contrast convention (mcl-web's globals.css style): every token that is ever
   painted as TEXT carries its measured contrast ratio against the darkest
   surface it can sit on, --bg-panel-solid, on its own line. All are >= 4.5:1.
   Glass surfaces composite over that same base, so the ratio is the floor,
   not the average.

   admin.css is the only consumer and holds zero raw color, radius, shadow,
   font-size or duration literals — everything there is a var() from here. */

:root {
  /* ---- Accent ---------------------------------------------------------- */
  --accent: #38bdf8;                       /* 8.33:1 on --bg-panel-solid */
  --accent-strong: #7dd3fc;                /* 10.71:1 on --bg-panel-solid */
  --accent-soft: rgba(56, 189, 248, 0.16); /* fill only, never text */

  /* ---- Text tiers ------------------------------------------------------ */
  --text: #e8eef9;                         /* 15.33:1 on --bg-panel-solid */
  --text-muted: #9fb0c8;                   /* 8.09:1 on --bg-panel-solid */
  --text-faint: #859bba;                   /* 6.29:1 on --bg-panel-solid — the AA-corrected value */

  /* ---- Hairlines, glass, elevation ------------------------------------- */
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --glass: rgba(18, 25, 40, 0.55);
  --glass-strong: rgba(12, 17, 29, 0.74);
  --glass-blur: blur(26px) saturate(1.5);
  --glow: 0 18px 55px -14px rgba(0, 0, 0, 0.7);
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --ring: 0 0 0 3px rgba(56, 189, 248, 0.28);

  /* Surfaces used directly (toolbar pill fill, popups, the picker list)
     instead of --glass, so they render the same regardless of the browser's
     color-scheme preference. */
  --bg-panel: rgba(17, 24, 39, 0.74);
  --bg-panel-solid: #0f172a;
  --bg-elevated: rgba(30, 41, 59, 0.9);
  --bg-subtle: #1e293b;
  --bg-input: rgba(15, 23, 42, 0.6);
  --blur: saturate(1.6) blur(16px);

  /* ---- Geometry / motion ----------------------------------------------- */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;
  --shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.6), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 10px -2px rgba(0, 0, 0, 0.5);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --danger: #fca5a5;                       /* 9.41:1 on --bg-panel-solid */
  --warn: #b45309;                         /* fill/edge only — 3.56:1, NOT AA as text (use --warn-text) */

  /* Motion tokens: every transition/animation duration and easing curve in
     admin.css references one of these instead of a raw millisecond literal,
     and everything using them is gated behind
     `@media (prefers-reduced-motion: no-preference)`. */
  --motion-duration-fast: 150ms;
  --motion-duration-base: 250ms;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Type scale: every chrome font-size rounds onto one of these steps. */
  --font-2xs: 10px;
  --font-xs: 11px;
  --font-sm: 12px;
  --font-md: 13px;
  --font-base: 14px;
  --font-lg: 15px;
  --font-xl: 16px;
  --font-2xl: 18px;
  --font-3xl: 22px;

  /* Z-index scale: toolbar sits below the panels, which sit below the
     detail sidebar and modal pickers; the small values are local elevation
     within one component's own stacking context. */
  --z-toolbar: 999;
  --z-panel: 1000;
  --z-detail-sidebar: 1001;
  --z-modal-picker: 1002;
  --z-sidebar-tabs: 1;
  --z-sidebar-header: 2;
  --z-agent-dock: 3;
  --z-sticky-actions: 5;

  /* =====================================================================
     KLIPPER ADDITIONS — everything above this line is archbot, verbatim.
     Values below exist only in KLIP and are mixed from the ported palette.
     ===================================================================== */

  /* The full-height control-room backdrop. Two very low-opacity accent
     washes over a vertical --bg-subtle -> --bg-panel-solid fall, so the
     top bar's glass has something to refract. No third hue is introduced. */
  --bg-gradient:
    radial-gradient(1100px 620px at 14% -12%, rgba(56, 189, 248, 0.10), transparent 62%),
    radial-gradient(820px 520px at 92% -6%, rgba(125, 211, 252, 0.06), transparent 58%),
    linear-gradient(180deg, #1e293b 0%, #0f172a 42%, #0f172a 100%);

  /* Health dot / positive delta. */
  --ok: #4ade80;                           /* 10.25:1 on --bg-panel-solid */

  /* AA-safe stand-in for --warn wherever warn semantics must be READ rather
     than filled. The ported --warn is kept untouched for fills/edges. */
  --warn-text: #fbbf24;                    /* 10.69:1 on --bg-panel-solid */

  /* Skeleton pulse. Deliberately slower than the interaction tokens above: a
     placeholder breathes, it does not blink. The name keeps the
     --motion-duration- prefix so admin.css's tokenized-motion rule holds. */
  --motion-duration-pulse: 1200ms;

  /* S9-01 print surface. The app is dark-only on screen; on paper a dark
     fill burns a cartridge and reads worse, so the briefing prints black on
     white. These live here, not in admin.css, because tokens.css is the one
     file allowed to hold a raw color literal. */
  --print-bg: #ffffff;
  --print-text: #000000;
  --print-muted: #333333;
  --print-rule: #666666;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   The one per-instance color in the system: an entity avatar's disc hue.
   admin.js sets ONLY the number (`style={{ "--avatar-hue": avatarHue(name) }}`),
   so no color literal ever leaves this file. Lightness 26% / saturation 52% is
   the ceiling at which --text initials still clear WCAG AA on the WORST hue
   (~60deg yellow measures 5.2:1; every other hue is darker, so higher).
   Deliberately NOT a :root token: a var() inside a :root custom property
   resolves against :root, so a per-card override would never reach it.
   --------------------------------------------------------------------------- */
.entity-avatar {
  background: hsl(var(--avatar-hue, 200) 52% 26%);
}