/* WCB review app theme.

   Apple's Human Interface Guidelines decide layout, controls, type, materials and motion.
   The Adivo Design System decides the one tint color (Adivo Blue, from
   design-system/tokens/colors.css) and the logo. This is the only stylesheet with raw
   color values; app.css uses these tokens and nothing else.

   The app is light mode only, by choice (Will, 2026-10-02): it does not follow the
   system's dark appearance. tests/test_design_system.py checks WCAG AA contrast for every
   text and surface pair below. Tertiary labels are for placeholders and disabled text on
   white surfaces only; anything else uses the secondary label. */
:root{
  color-scheme:light;

  /* Type: the system font (SF on a Mac). No font files are embedded. */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-brand:'Inter','Helvetica Neue',Arial,sans-serif;   /* the sidebar header title only */
  --t-large:26px;--t-large-lh:32px;--t-large-track:-0.012em;
  --t-title:22px;--t-title-lh:28px;
  --t-headline:17px;--t-headline-lh:22px;
  --t-reading:15px;--t-reading-lh:23px;
  --t-body:13px;--t-body-lh:18px;
  --t-callout:12px;--t-callout-lh:16px;
  --t-caption:11px;--t-caption-lh:14px;
  --w-regular:400;--w-medium:500;--w-semibold:600;--w-bold:700;

  /* Space, size and concentric corner radii */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:48px;--s9:64px;
  --sidebar-w:280px;--list-w:380px;--page-w:720px;
  --control-h:34px;--row-h:48px;--target:44px;
  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-capsule:999px;--r-round:50%;

  /* Motion: smooth, settling easing; the only overshoot is the switch knob, and it is small */
  --ease:cubic-bezier(.22,.8,.24,1);
  --spring:cubic-bezier(.3,1.25,.55,1);
  --dur:200ms;--dur-slow:300ms;

  /* Tint: Adivo Blue is the app's single accent */
  --tint:var(--adivo-blue);
  --tint-hover:color-mix(in srgb,var(--adivo-blue) 88%,black);
  --tint-pressed:color-mix(in srgb,var(--adivo-blue) 78%,black);
  --tint-text:color-mix(in srgb,var(--adivo-blue) 86%,black);   /* links and plain buttons */
  --tint-soft:color-mix(in srgb,var(--adivo-blue) 14%,transparent);
  --focus-ring:color-mix(in srgb,var(--adivo-blue) 50%,transparent);
  --tint-edge:var(--tint);   /* the outline of an on switch */
  --on-tint:#FFFFFF;

  /* Text: three levels, plus the destructive red */
  --label:#1D1D1F;
  --label-2:#636366;
  --label-3:#767679;
  --red:#C9001A;
  --red-soft:color-mix(in srgb,#C9001A 6%,transparent);

  /* Library source status: a neon green that glows when an entry is live, red when it is out
     of date. The dots are read from their edges (3:1 on white); the words use --live-text. */
  --live:#2BEA7A;
  --live-edge:#0E8A43;
  --live-glow:color-mix(in srgb,#2BEA7A 55%,transparent);
  --live-glow-strong:color-mix(in srgb,#2BEA7A 85%,transparent);
  --live-text:#0B6E35;
  --stale-edge:#8E0012;

  /* Surfaces */
  --bg:#FFFFFF;
  --bg-grouped:#F2F2F7;
  --bg-cell:#FFFFFF;
  --bg-input:#FFFFFF;
  --seg-selected:#FFFFFF;
  --knob:#FFFFFF;
  --sidebar-tone:#EEEEF1;
  --material:color-mix(in srgb,var(--sidebar-tone) 82%,transparent);
  --material-solid:var(--sidebar-tone);
  --separator:rgba(60,60,67,.14);
  --separator-strong:rgba(60,60,67,.26);
  --fill:rgba(120,120,128,.12);
  --fill-hover:rgba(120,120,128,.18);
  --fill-pressed:rgba(120,120,128,.26);
  --switch-off:rgba(120,120,128,.16);
  --switch-edge:#8A8A8F;
  --shadow-control:0 1px 2px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.05);
  --shadow-knob:0 1px 3px rgba(0,0,0,.22),0 0 0 .5px rgba(0,0,0,.05);
  --blur:saturate(180%) blur(24px);

  /* Sidebar header card: the "Sidebar Header" design from Claude Design (Adivo brand guide
     v3.0). Neutrals are the brand palette; the glow and focus use v3.0 Adivo Blue. */
  --brand-blue-v3:#1F4E95;
  --brand-card:var(--white);
  --brand-card-hover:var(--frost);
  --brand-card-press:var(--mist);
  --brand-card-edge:var(--mist);
  --brand-card-edge-hover:var(--silver);
  --brand-card-shadow:0 0 0 3px var(--frost),0 0 12px 0 color-mix(in srgb,var(--brand-blue-v3) 18%,transparent);
  --brand-card-shadow-hover:0 0 0 3px var(--mist),0 0 16px 0 color-mix(in srgb,var(--brand-blue-v3) 28%,transparent);
  --brand-rule:var(--hairline);
  --brand-ink:var(--ink);

  /* Glyphs drawn by CSS (pop-up chevrons, the search magnifier), in --label-2 */
  --icon-popup:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636366' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  --icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636366' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

/* Reduce transparency: every material becomes a solid fill */
@media (prefers-reduced-transparency:reduce){:root{
  --material:var(--material-solid);
  --blur:none;
}}