/* ═══════════════════════════════════════════════════════════════════════════
   SBR Air — shared/ui/sbr-air.tokens.css  (V1 shared design foundation)
   Design tokens from docs/design/SBR_Air_Visual_Design_System_v1.1.md (VISUALLY FROZEN, SBR-approved) and the
   frozen Jobs Operations Board prototype (navigation detail colours only). No value here is invented.
   OPT-IN: tokens are declared on .sa-scope, never on :root, so legacy screens, the Worker App and the
   Estimator (.sbr-est) are unaffected until a container opts in with class="sa-scope".
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-scope {
  /* ── Neutrals (v1.1 §4.1) ─────────────────────────────────────────────── */
  --sa-canvas: #F6F5F2;
  --sa-surface: #FFFFFF;
  --sa-surface-subtle: #FAFAF8;
  --sa-surface-sunken: #F0EFEB;
  --sa-surface-hover: #F7F8FA;          /* v1.1 §0.1 #7 */
  --sa-surface-selected: #F2F6FE;       /* v1.1 §0.1 #8 (+ 3 px blue indicator) */
  --sa-text: #1F2328;
  --sa-text-2: #57606A;
  --sa-text-3: #636A73;
  --sa-text-disabled: #A0A7B0;
  --sa-text-inverse: #FFFFFF;
  --sa-border: #E4E6EA;
  --sa-border-default: #D5D9DF;
  --sa-border-control: #8C959F;
  --sa-border-strong: #B8BEC6;
  --sa-focus: #2563EB;
  --sa-scrim: rgba(28, 31, 36, .32);

  /* ── Navigation (v1.1 §4.1 / §10; approved for this assignment; details from the frozen prototype) ── */
  --sa-nav: #1C1F24;
  --sa-nav-hover: #262A31;
  --sa-nav-active: #2F343C;
  --sa-nav-text: #C9CED6;
  --sa-nav-text-active: #FFFFFF;
  --sa-nav-section: #8A919C;
  --sa-nav-indicator: #60A5FA;          /* blue.400; also the focus ring on dark surfaces (V1-D5) */
  --sa-nav-divider: #2C3037;
  --sa-nav-count-bg: #343943;
  --sa-nav-count-text: #E6E9EE;
  --sa-nav-avatar: #3A4150;

  /* ── Semantic families (v1.1 §4.2): solid · hover · pressed · subtle · border · text ── */
  --sa-blue: #2563EB;  --sa-blue-hover: #1D4ED8;  --sa-blue-pressed: #1E40AF;
  --sa-blue-subtle: #EFF4FF;  --sa-blue-border: #BFD3FE;  --sa-blue-text: #1D4ED8;
  --sa-green: #15803D;  --sa-green-hover: #166534;  --sa-green-pressed: #14532D;
  --sa-green-subtle: #ECFDF3;  --sa-green-border: #ABEFC6;  --sa-green-text: #166534;
  --sa-amber: #D97706;  --sa-amber-hover: #B45309;  --sa-amber-pressed: #92400E;   /* amber solid: dots / bars only */
  --sa-amber-subtle: #FFF7E6;  --sa-amber-border: #FCD9A0;  --sa-amber-text: #92400E;
  --sa-red: #DC2626;  --sa-red-hover: #B91C1C;  --sa-red-pressed: #991B1B;
  --sa-red-subtle: #FEF2F2;  --sa-red-border: #FECACA;  --sa-red-text: #B91C1C;
  --sa-violet: #6D28D9;  --sa-violet-hover: #5B21B6;  --sa-violet-pressed: #4C1D95; /* Estimate marker only */
  --sa-violet-subtle: #F5F3FF;  --sa-violet-border: #DDD6FE;  --sa-violet-text: #5B21B6;
  --sa-slate: #475467;  --sa-slate-subtle: #F1F4F8;  --sa-slate-border: #D9E0EA;  --sa-slate-text: #475467;
  --sa-gray: #6B7280;  --sa-gray-hover: #4B5563;  --sa-gray-pressed: #374151;
  --sa-gray-subtle: #F3F4F6;  --sa-gray-border: #E5E7EB;  --sa-gray-text: #4B5563;
  --sa-lifecycle-done: #9DB1C9;         /* v1.1 §4.4 */
  --sa-tag-est-border: #C4B5FD;         /* EST / WO phase-tag borders as rendered in the frozen prototype (plan V1-D4) */
  --sa-tag-wo-border: #93B4FB;
  --sa-brand: #00C896;                  /* brand mark only (v1.1 §4.2) */

  /* ── Typography (v1.1 §5) ─────────────────────────────────────────────── */
  /* "SBR Air Inter" is a private family name for the bundled Inter file, so existing font stacks that merely
     mention "Inter" (e.g. the Estimator M1 fallback list) do not start downloading it. */
  --sa-font: "SBR Air Inter", Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sa-text-xs: 12px;   --sa-lh-xs: 16px;    /* metadata, grid header, badge, helper */
  --sa-text-sm: 13px;   --sa-lh-sm: 18px;    /* secondary row text, form label */
  --sa-text-md: 14px;   --sa-lh-md: 20px;    /* body, primary row, button, block title */
  --sa-text-lg: 16px;   --sa-lh-lg: 24px;    /* section title */
  --sa-text-xl: 20px;   --sa-lh-xl: 28px;    /* page title */
  --sa-text-2xl: 24px;  --sa-lh-2xl: 28px;   /* metric number */
  --sa-weight-regular: 400;  --sa-weight-medium: 500;  --sa-weight-semibold: 600;

  /* ── Spacing (v1.1 §6, base 4 px) ─────────────────────────────────────── */
  --sa-space-1: 4px;  --sa-space-2: 8px;  --sa-space-3: 12px;  --sa-space-4: 16px;  --sa-space-5: 20px;
  --sa-space-6: 24px; --sa-space-8: 32px; --sa-space-10: 40px; --sa-space-12: 48px; --sa-space-16: 64px;

  /* ── Radius, borders, elevation (v1.1 §7) ─────────────────────────────── */
  --sa-r-sm: 4px;  --sa-r-md: 6px;  --sa-r-lg: 8px;  --sa-r-xl: 12px;  --sa-r-full: 999px;
  --sa-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --sa-shadow-md: 0 4px 12px rgba(16, 24, 40, .10);
  --sa-shadow-lg: 0 12px 32px rgba(16, 24, 40, .16);

  /* ── Sizes (v1.1 §6, §10, §19, §24) ───────────────────────────────────── */
  --sa-ctl-h: 36px;  --sa-ctl-h-sm: 32px;  --sa-ctl-h-touch: 44px;  --sa-ctl-h-estimator: 48px;
  --sa-row-h: 46px;  --sa-row-h-compact: 36px;  --sa-row-h-portrait: 52px;
  --sa-badge-h: 22px;  --sa-flag-sm-h: 18px;
  --sa-nav-w: 232px;  --sa-nav-rail: 64px;  --sa-nav-overlay: 280px;
  --sa-drawer-w: clamp(480px, 38vw, 720px);
  --sa-modal-sm: 480px;  --sa-modal-md: 640px;

  /* ── Z-order inside an SBR Air stacking context (v1.1 §24) ─────────────── */
  --sa-z-sticky: 10;  --sa-z-nav: 20;  --sa-z-drawer: 30;  --sa-z-popover: 40;  --sa-z-modal: 50;  --sa-z-toast: 60;

  /* ── Motion (v1.1 §9) ─────────────────────────────────────────────────── */
  --sa-dur-fast: 100ms;  --sa-dur-base: 150ms;  --sa-dur-drawer: 200ms;  --sa-dur-drawer-close: 180ms;
  --sa-ease: ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .sa-scope { --sa-dur-fast: 0ms; --sa-dur-base: 0ms; --sa-dur-drawer: 0ms; --sa-dur-drawer-close: 0ms; }
}