/* Depot IT design tokens: the one home for the depot-it.com look (2026-10-08 landing redesign).
   Every Depot IT page loads this before its own styles, through templates/_depot_head.html.
   tailwind.config.js and static/style.css restate these values as hex because Tailwind's opacity
   modifiers (bg-brand-red/5) need literal colours: change a colour here, then mirror it there.
   The client portal does NOT load this file; it keeps tenant colours via portal/_theme.html. */
:root {
  /* brand: the #331975 family for ink and fields, gold only for devices in motion, depots in business hours and the closing button */
  --brand: #331975;
  --brand-hover: #40228f;
  --brand-press: #26115a;
  --ink: #1e1433;
  --ink-2: #574d6e;
  --canvas: #f5f2f9;
  --canvas-2: #ebe5f4;
  --paper: #fbf9fd;
  --line: #ddd4ec;
  --card: rgba(251, 249, 253, 0.9);
  --gold: #e2bd6b;
  --gold-text: #85601c;   /* 5.1:1 on --canvas, kept from the old page's AA pass */
  --gold-mark: #b8892f;
  --on-dark: #f7f4fc;
  --on-dark-2: #cfc4ea;

  /* type scale: nine steps, the only font sizes on the landing page (phones retune the fixed ones below) */
  --fs-display: clamp(38px, 4.6vw, 68px);
  --fs-h2: clamp(32px, 3.6vw, 52px);
  --fs-num: clamp(30px, 1rem + 1.9vw, 44px);
  --fs-h3: 22px;
  --fs-lead: 18px;
  --fs-body: 17px;
  --fs-ui: 16px;
  --fs-sm: 15px;
  --fs-xs: 14px;

  /* motion constants, resolved from the minimal grammar: opacity-only steps, no blur, no travel.
     Feedback (hover, press, swaps) runs on --dur-micro; only section arrivals use --dur-enter.
     The depot floor and the operation view keep time in static/landing/depot-sim.js. Counters roll
     their digits on --dur-roll (library: number-pop-in) and status tags pop on --dur-tag: both are
     live-metric feedback, the one place the page lets a number move. */
  --dur-micro: 140ms;
  --dur-enter: 280ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dist: 0px;
  --blur: 0px;
  --scale: 1;
  --dur-roll: 420ms;
  --dur-tag: 220ms;
  --ease-roll: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* spacing on a 4px base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --pad-x: clamp(20px, 4vw, 56px);
  --maxw: 1200px;
  --section: clamp(96px, 11vw, 160px);
  --bar-h: 72px;

  --r-lg: 20px;
  --r-pill: 999px;

  --font: "Onest Variable", ui-sans-serif, system-ui, sans-serif;
}
@media (max-width: 767px) {
  :root { --bar-h: 60px; --fs-h3: 19px; --fs-lead: 16px; --fs-body: 16px; --fs-ui: 15px; --fs-sm: 14px; --fs-xs: 13px; }
}
/* reduced motion: every transition runs on the motion tokens, so zeroing them stops it all */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-micro: 0ms; --dur-enter: 0ms; --dur-roll: 0ms; --dur-tag: 0ms; }
}