/* ═════════════════════════════════════════════════════════════
   Horizon Inventory Pro — design tokens (loaded by every page)
   Apple design file (DESIGN.md). Every colour / size in the app comes
   from here. --brand-navy is replaced at runtime by the client's
   brand colour (partials/brand-style).
   ═════════════════════════════════════════════════════════════ */
:root{
  /* Apple design file (DESIGN.md): parchment and white canvases, near-black ink, one accent (Action Blue).
     --brand-navy is the action colour; a client's brand colour replaces it at runtime (partials/brand-style). */
  --brand-navy:#0066cc; --brand-navy-deep:#0058b0; --brand-navy-tint:#e8f1fb;
  --label-ink:#181d26; --brand-flare:#d70015; --brand-flare-deep:#d70015; --brand-flare-tint:#fff0f1;

  /* status tints (meaning, not decoration): the same in both themes, always with ink text */
  --sig-coral:#d70015; --sig-forest:#137333; --sig-cream:#fff0f1; --sig-peach:#ffcfb3;
  --sig-mint:#dcf2e1; --sig-yellow:#ffe9a8; --sig-mustard:#b25000;

  /* neutrals: sea = dark tiles and text on them, ink = text and greys */
  --sea-100:#fafafc; --sea-200:#cccccc; --sea-300:#86868b; --sea-400:#86868b;
  --sea-700:#1d1d1f; --sea-800:#1d1d1f;
  --ink-900:#1d1d1f; --ink-700:#333333; --ink-300:#86868b; --ink-200:#e0e0e0; --ink-100:#f5f5f7;
  --fg-1:#1d1d1f; --fg-2:#636366;   /* Apple's darker secondary grey: 4.5:1 even on the light-grey tracks */
  --bg-1:#ffffff;--on-dark:#ffffff; --bg-2:#fafafc; --bg-3:#ececf0;
  --line-1:#e0e0e0; --line-2:#d2d2d7;

  /* status text and tints */
  --ok:#137333; --ok-tint:#dcf2e1;   /* 4.9:1 on its own tint */
  --warn:#a35200; --warn-tint:#fff4d6;
  --err:#d70015; --err-tint:#fff0f1;
  --info:#0071e3; --link:#0066cc; --link-active:#004f9f;

  /* type: the system face first (SF Pro on Apple devices), Inter (self-hosted, the documented substitute) everywhere else */
  --font-body:-apple-system,BlinkMacSystemFont,Inter,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,Inter,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --tr-eyebrow:0; --tr-wide:.02em; --tr-snug:-.01em; --tr-tight:-.022em;

  /* theme roles: page canvas (parchment), text on the action colour, selected rows */
  --canvas:#f5f5f7; --on-brand:#ffffff; --selected:#e8f1fb;
  /* text on the status tints: the same in light and dark, because the tints don't change */
  --on-sig-warn:#7a4a00; --on-sig-err:#b00012;

  /* shape: pills for actions, chips and search; 18px cards; no shadows on chrome */
  --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:18px; --r-pill:9999px; --r-frame:28px; /* frame: the phone scanner's camera viewfinder only */
  --sh-1:none; --sh-2:none; --sh-3:none; --sh-4:none;
  --sh-focus:0 0 0 3px rgba(0,113,227,.3);
  --ease:cubic-bezier(.22,1,.36,1); --t-fast:140ms; --t:220ms;

  /* legacy names, still used by the scanner, sign-in and label print pages */
  --ink:var(--fg-1); --placeholder:#6e6e73; --surface:#fff; --line:var(--line-1);
  /* status on surfaces that are dark in both themes (scanner screen, toast): Apple's dark-mode system colours */
  --on-dark-ok:#30d158; --on-dark-warn:#ffb340; --on-dark-err:#ff6961; --on-dark-scan:#2997ff;
  --label:#0a2e0e; --label-ink:#0a2e0e; --label-bg-line:#dddddd; --scan:#a8d8c4;
}
/* ── Dark theme (night watch on the bridge): follows the device, or the Theme switch in the user menu.
   Apple's dark tiles: black canvas, near-black cards. The status tints keep their ink text, so badges read the same.
   Printed documents set data-theme="light". ── */
@media screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){
  color-scheme:dark;
  --canvas:#000000; --bg-1:#1d1d1f; --bg-2:#232325; --bg-3:#2c2c2e; --surface:#1d1d1f;
  --line-1:#38383a; --line-2:#48484a;
  --fg-1:#f5f5f7; --ink-700:#d2d2d7; --fg-2:#a1a1a6; --placeholder:#8e8e93; --ink-300:#636366; --ink-200:#38383a; --ink-100:#232325;
  --sea-100:#232325; --sea-700:#3a3a3c; --sea-800:#272729;
  /* the action stays Action Blue (a touch brighter on black); blue text becomes Sky Link Blue */
  --brand-navy:#0071e3; --brand-navy-deep:#0062c4; --brand-navy-tint:#10243b; --on-brand:#ffffff;
  --brand-flare:#ff6961; --brand-flare-tint:#3a1414;
  --ok:#30d158; --warn:#ffb340; --err:#ff6961; --info:#2997ff; --link:#2997ff; --link-active:#64b0ff;
  --ok-tint:#0f2a17; --warn-tint:#33260d; --err-tint:#3a1414;
  --selected:#10243b;
  --sh-focus:0 0 0 3px rgba(41,151,255,.35);
}}
@media screen{:root[data-theme=dark]{
  color-scheme:dark;
  --canvas:#000000; --bg-1:#1d1d1f; --bg-2:#232325; --bg-3:#2c2c2e; --surface:#1d1d1f;
  --line-1:#38383a; --line-2:#48484a;
  --fg-1:#f5f5f7; --ink-700:#d2d2d7; --fg-2:#a1a1a6; --placeholder:#8e8e93; --ink-300:#636366; --ink-200:#38383a; --ink-100:#232325;
  --sea-100:#232325; --sea-700:#3a3a3c; --sea-800:#272729;
  /* the action stays Action Blue (a touch brighter on black); blue text becomes Sky Link Blue */
  --brand-navy:#0071e3; --brand-navy-deep:#0062c4; --brand-navy-tint:#10243b; --on-brand:#ffffff;
  --brand-flare:#ff6961; --brand-flare-tint:#3a1414;
  --ok:#30d158; --warn:#ffb340; --err:#ff6961; --info:#2997ff; --link:#2997ff; --link-active:#64b0ff;
  --ok-tint:#0f2a17; --warn-tint:#33260d; --err-tint:#3a1414;
  --selected:#10243b;
  --sh-focus:0 0 0 3px rgba(41,151,255,.35);
}}
::placeholder{color:var(--placeholder);opacity:1}

/* ── Keyboard focus: one visible ring everywhere ── */
:focus-visible{outline:2px solid var(--info);outline-offset:2px}
body.scanner :focus-visible{outline-color:var(--scan)}
.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{position:absolute;left:8px;top:-48px;z-index:1000;background:var(--fg-1);color:var(--canvas);padding:10px 14px;border-radius:var(--r-md);font:500 14px var(--font-body);text-decoration:none}
.skip:focus{top:8px}
::selection{background:var(--brand-navy-tint);color:var(--fg-1)}
input,textarea{caret-color:var(--brand-navy)}
body.scanner input{caret-color:var(--scan)}

/* Field-level validation (set by partials/field-errors) */
.field-err{display:block;margin-top:4px;color:var(--err);font-size:13px;font-weight:500}
[data-err-host]>.field-err{flex-basis:100%}
[aria-invalid="true"]{border-color:var(--err)!important}
code{overflow-wrap:anywhere}
/* Shared one-property helpers. !important so they behave exactly like the inline styles they replaced. */
.muted{color:var(--fg-2)!important}.ink{color:var(--fg-1)!important}.navy{color:var(--link)!important}   /* blue text uses the link colour: the action colour is for fills */
.t-12{font-size:12px!important}.t-13{font-size:13px!important}.t-14{font-size:14px!important}
.h-40{height:40px!important}.h-44{height:44px!important}
.gap-6{gap:6px!important}.gap-8{gap:8px!important}.gap-10{gap:10px!important}.gap-12{gap:12px!important}
/* Reduced motion: nothing moves or slides, but colour and opacity changes still fade so state changes stay readable. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-property:opacity,color,background-color,border-color!important;transition-duration:120ms!important}}