/* AG Tasks design tokens — UX-REDESIGN-SPEC §3 and Appendix B.
   applyBranding() (js/brand.js) overrides only --brand-50, --brand-100, --brand-600, --brand-700
   from the owner's brand colour; everything else is fixed. */
:root {
  /* Neutral (Automation Gallery greys) */
  --n0: #FFFFFF; --n50: #F7F7F8; --n100: #F4F4F6; --n200: #E6E7E8; --n300: #D1D3D4;
  --n400: #A7A9AC; --n500: #8C8E91; --n600: #6D6E71; --n700: #58595B; --n800: #3F3F40; --n900: #231F20;

  /* Brand (AG red) */
  --brand-50: #FBEDEE; --brand-100: #F6D5D7; --brand-600: #C7222D; --brand-700: #9F1B24; --brand-800: #7A141B;

  /* Semantic: each tint/solid pair is text-on-tint >= 4.5:1 */
  --danger-50: #FBEDEE;   --danger-600: #C7222D; --danger-700: #9F1B24; --danger-text: #991B1B;
  --warning-100: #FEF3C7; --warning-700: #B45309;
  --success-100: #DCFCE7; --success-700: #15803D; --success-800: #166534; --success-900: #14532D;
  --verified-100: #CCFBF1; --verified-700: #0F766E;
  --info-100: #DBEAFE;    --info-700: #1D4ED8;
  --review-100: #EDE9FE;  --review-700: #5B21B6;

  /* Roles */
  --bg: var(--n100); --surface: var(--n0); --surface-muted: var(--n50);
  --border: var(--n200); --border-strong: var(--n300);
  --text: var(--n900); --text-2: var(--n700); --text-3: var(--n600); --link: var(--n800);
  --focus: 0 0 0 3px rgba(199, 34, 45, .25); --backdrop: rgba(35, 31, 32, .45);

  /* Spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* Radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-sheet: 16px; --r-full: 999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(35, 31, 32, .06);
  --sh-md: 0 4px 12px rgba(35, 31, 32, .10);
  --sh-lg: 0 12px 32px rgba(35, 31, 32, .18);

  /* Type (Lato 400 / 700 / 900; 900 only for stat numerals) */
  --font: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-display: 900 32px/36px var(--font);
  --t-h1: 700 24px/32px var(--font);
  --t-h2: 700 18px/24px var(--font);
  --t-h3: 700 12px/16px var(--font);
  --t-body: 400 15px/22px var(--font);
  --t-body-strong: 700 15px/22px var(--font);
  --t-sm: 400 13px/18px var(--font);
  --t-label: 700 13px/18px var(--font);
  --t-caption: 400 12px/16px var(--font);
  --t-input: 400 16px/24px var(--font);

  /* Sizes */
  --header-h: 64px; --header-h-phone: 52px; --tabbar-h: 56px; --actionbar-h: 64px;
  --control-h: 40px; --control-h-phone: 48px; --target-min: 44px;
  --container: 1120px; --gutter: 24px; --gutter-phone: 16px;
  --card-pad: 20px;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1); --dur: 160ms; --dur-shimmer: 1.4s;

  /* Avatar palette (AVATAR_COLORS[user.id % 6]) */
  --av-0: #E6E7E8; --av-1: #DCE6F2; --av-2: #E3EFE6; --av-3: #F2E8DC; --av-4: #EDE6F2; --av-5: #F6D5D7;
}
@media (max-width: 719px) {
  :root { --t-h1: 700 22px/28px var(--font); --control-h: var(--control-h-phone); --gutter: var(--gutter-phone); --card-pad: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-shimmer: 0ms; }
}