/* ==========================================================================
   TOKENS — the ONLY file allowed to contain raw colors, sizes, fonts, radii,
   border widths, shadows, durations and z-indexes.
   Every other stylesheet (and every script) must reference these variables.
   To restyle the whole product, change values here and nothing else.
   Enforced by test/css-standard.test.mjs.
   ========================================================================== */
:root {
  /* ---- color: surfaces & text ---- */
  --color-bg: #f5f5f7;
  --color-surface: #ffffff;
  --color-surface-alt: #fbfbfd;
  --color-text: #1d1d1f;
  --color-text-muted: #5f5f64;
  --color-text-faint: #6b6b70;
  --color-line: rgba(0, 0, 0, 0.08);
  --color-line-strong: rgba(0, 0, 0, 0.14);
  --color-code-bg: #f5f5f7;

  /* ---- color: brand & status ---- */
  --color-primary: #0066cc;
  --color-primary-hover: #0071e3;
  --color-primary-soft: rgba(0, 113, 227, 0.1);
  --color-primary-text: #00479b;
  --color-primary-on: #ffffff;
  --color-success: #13783a;
  --color-success-soft: rgba(29, 157, 74, 0.12);
  --color-success-switch: #34c759;
  --color-danger: #c40016;
  --color-danger-soft: rgba(215, 0, 21, 0.09);
  --color-danger-soft-hover: rgba(215, 0, 21, 0.16);
  --color-warning: #9a5200;
  --color-warning-soft: rgba(255, 159, 10, 0.15);
  --color-warning-text: #7a4300;
  --color-warning-bar: #ff9f0a;
  --color-accent: #8e5af7;
  --color-focus: var(--color-primary);          /* the keyboard focus outline, one colour for every control (3:1 or better on every surface) */
  --color-focus-on-dark: var(--color-scan-text);   /* the same outline inside the camera layer */

  /* ---- color: neutral washes, controls, overlays ---- */
  --color-neutral-soft: rgba(0, 0, 0, 0.06);
  --color-neutral-soft-hover: rgba(0, 0, 0, 0.1);
  --color-wash: rgba(0, 0, 0, 0.05);
  --color-wash-faint: rgba(0, 0, 0, 0.02);
  --color-track: rgba(0, 0, 0, 0.07);
  --color-scroll-thumb: rgba(0, 0, 0, 0.22);
  --color-scroll-thumb-hover: rgba(0, 0, 0, 0.38);
  --color-switch-off: rgba(120, 120, 128, 0.32);
  --color-segment: rgba(120, 120, 128, 0.14);
  --color-knob: #ffffff;
  --color-scrim: rgba(0, 0, 0, 0.32);
  --color-nav: rgba(251, 251, 253, 0.78);
  --color-nav-mobile: rgba(251, 251, 253, 0.86);
  --color-toast: rgba(29, 29, 31, 0.92);
  --color-toast-text: #ffffff;
  --color-toast-danger: rgba(215, 0, 21, 0.94);
  --color-qr-dark: #000000;
  --color-qr-light: #ffffff;
  --color-shadow-1: rgba(0, 0, 0, 0.04);
  --color-shadow-2: rgba(0, 0, 0, 0.05);
  --color-shadow-3: rgba(0, 0, 0, 0.14);
  --color-shadow-knob: rgba(0, 0, 0, 0.25);

  /* ---- camera scanner (a dark, full-screen camera layer) ---- */
  --color-scan-bg: #000000;
  --color-scan-dim: rgba(0, 0, 0, 0.58);
  --color-scan-glass: rgba(28, 28, 30, 0.78);
  --color-scan-btn: rgba(255, 255, 255, 0.16);
  --color-scan-btn-hover: rgba(255, 255, 255, 0.26);
  --color-scan-text: #ffffff;
  --color-scan-text-soft: rgba(255, 255, 255, 0.72);
  --color-scan-aim: #ff453a;
  --color-scan-ok: #34c759;
  --color-scan-warn: #ffd60a;
  --shadow-scan-dim: 0 0 0 100vmax var(--color-scan-dim);

  /* ---- typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
  --text-ident: 14px;
  --text-micro: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-body: 15px;
  --text-lead: 16px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-h2: 22px;
  --text-h1-sm: 26px;
  --text-stat-sm: 24px;
  --text-stat: 28px;
  --text-h1: 32px;
  --text-code-input: 26px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-body: 1.47;
  --leading-tight: 1.12;
  --leading-code: 1.6;
  --tracking-body: -0.01em;
  --tracking-heading: -0.022em;
  --tracking-brand: -0.02em;
  --tracking-stat: -0.03em;
  --tracking-code: 0.35em;
  --tracking-none: 0;

  /* ---- spacing scale ---- */
  --space-0: 0;
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 56px;
  --space-6xl: 80px;

  /* ---- radii ---- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 26px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---- borders & focus ---- */
  --border-width: 1px;
  --border-default: var(--border-width) solid var(--color-line);
  --border-strong: var(--border-width) solid var(--color-line-strong);
  --border-primary: var(--border-width) solid var(--color-primary);
  --ring-width: 4px;
  --focus-outline-w: 2px;
  --focus-outline-offset: 2px;
  --focus-ring: 0 0 0 var(--focus-outline-w) var(--color-focus);
  --shadow-filled: 0 0 0 var(--ring-width) var(--color-success);

  /* ---- shadows ---- */
  --shadow-card: 0 1px 2px var(--color-shadow-1), 0 4px 16px var(--color-shadow-2);
  --shadow-overlay: 0 10px 40px var(--color-shadow-3);
  --shadow-knob: 0 2px 6px var(--color-shadow-knob);
  --shadow-segment: 0 1px 4px var(--color-shadow-3);

  /* ---- component sizes ---- */
  --tap-min: 44px;            /* smallest comfortable touch target (Apple and Google guidance) */
  --text-input-touch: 16px;   /* iPhones zoom the page when a field is smaller than this */
  --tabbar-h: 56px;
  --tabbar-icon: 24px;
  --sheet-max-h-phone: 92dvh;
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h: 44px;
  --control-h-lg: 46px;
  --control-h-xl: 56px;
  --col-check-w: 88px;
  --col-req-w: 168px; --col-war-w: 112px; --col-pct-w: 76px;
  --chip-type-w: 120px;
  --stock-list-max-h: 380px;
  --feed-max-h: 640px;
  --check-size: 20px;          /* native checkbox/radio box */
  --stock-price-w: 80px;
  --config-w: 840px;
  --logo-preview: 64px;
  --topbar-h: 52px;
  --sidebar-w: 232px;
  --content-max: 1240px;
  --sticky-offset: 76px;
  --auth-card-w: 420px;
  --scroll-w: 10px;
  --scroll-gap: 2px;
  --sheet-w: 480px;
  --sheet-max-h: 90vh;
  --switch-w: 51px;
  --switch-h: 31px;
  --switch-knob: 27px;
  --switch-travel: 20px;
  --icon-size: 18px;
  --stroke-icon: 1.8;
  --stroke-spark: 2;
  --stat-pad-y: 18px;
  --chip-h: 22px;
  --meter-h: 8px;
  --spark-h: 64px;
  --qr-w: 190px;
  --logo-nav: 40px;
  --logo-auth: 96px;
  --logo-receipt: 56px;
  --card-padding: var(--space-2xl);
  --sheet-padding: var(--space-3xl);
  --auth-padding-y: var(--space-4xl);
  --field-padding-x: var(--space-md);
  --btn-padding-x: var(--space-xl);
  --btn-padding-x-sm: var(--space-lg);
  --width-xs: 110px;
  --width-date: 160px;
  --width-sm: 240px;
  --width-md: 320px;
  --width-lg: 360px;
  --pct-unit: 1%;
  --viewport-full: 100vh;
  --log-raw-max-h: 240px;
  --select-list-max-h: 280px;
  --select-list-gap: 4px;
  --sheet-w-wide: 640px;
  --width-receipt: 380px;
  --textarea-min-h: 88px;
  --shot-max-h: 240px;        /* a ticket screenshot shown in a conversation */
  --facts-label-w: var(--width-date);   /* one label column for every .facts block, so values line up across cards */
  --viewer-max-h: 60dvh;      /* the screenshot viewer: the picture is scaled to fit inside this height */
  --thumb-size: 56px;         /* a small preview of a screenshot waiting to be sent */
  --pick-list-max-h: 220px;
  --recovery-key-w: 28ch;
  --mail-preview-h: 560px;
  --width-phone: 375px;
  --scan-box-max-w: 560px;
  --scan-box-w: 90%;
  --scan-h-small: 64px;
  --scan-h-medium: 150px;
  --scan-size-large: 340px;
  --scan-corner: 28px;
  --scan-corner-w: 4px;
  --scan-aim-h: 2px;
  --scan-aim-inset: 5%;
  --scan-panel-w: 300px;
  --scan-panel-max-w: 560px;

  /* ---- glass & overlay effects ---- */
  --blur-md: 20px;
  --blur-sm: 6px;
  --saturate: 180%;
  --opacity-disabled: 0.5;
  --opacity-icon: 0.85;
  --opacity-spark: 0.25;
  --opacity-none: 0;

  /* ---- stacking ---- */
  --z-raised: 2;
  --z-nav: 20;
  --z-dropdown: 25;
  --z-side: 30;
  --z-modal: 50;
  --z-scanner: 55;
  --z-toast: 60;

  /* ---- motion ---- */
  --dur-fast: 0.15s;
  --dur-base: 0.2s;
  --dur-med: 0.3s;
  --dur-slow: 0.45s;
  --dur-meter: 0.6s;
  --dur-view: 0.28s;
  --dur-highlight: 1.6s;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --lift-sm: 8px;
  --lift-md: 14px;
  --lift-lg: 12px;
  --scale-press: 0.97;
  --scale-pop: 0.97;
  --scale-small-switch: 0.8;

  /* ---- shipping labels (printed sizes; the plain style is pure black on white for thermal printers) ---- */
  --label-4x6-w: 4in;
  --label-4x6-h: 6in;
  --label-dymo-w: 102mm;   /* the DYMO 4XL / 5XL shipping label (1744907) is 102 x 159 mm; its page in the driver is 104 mm wide, so the label is centred on it */
  --label-dymo-h: 159mm;
  --label-half-w: 8.5in;
  --label-half-h: 5.5in;
  --label-letter-w: 8.5in;
  --label-letter-h: 11in;
  --label-4x6-ratio: 2 / 3;
  --label-dymo-ratio: 102 / 159;
  --label-half-ratio: 17 / 11;
  --label-letter-ratio: 17 / 22;
  --label-pad: 0.2in;
  --fit-line-w: 0.2px;   /* the fit test page is drawn in millimetres: 1 unit = 1 mm */
  --fit-text-n: 2.2px;
  --fit-text-s: 2.6px;
  --fit-text-b: 3.2px;
  --fit-text-h: 5px;
  --label-pad-lg: 0.5in;
  --label-logo-w: 1.1in;
  --label-logo-h: 0.6in;
  --label-logo-w-std: 0.9in;   /* Label text size: Standard and Largest (Larger is the default, above) */
  --label-logo-h-std: 0.5in;
  --label-logo-w-max: 1.3in;
  --label-logo-h-max: 0.7in;
  --label-logo-w-lg: 1.6in;
  --label-logo-h-lg: 0.9in;
  --color-label-ink: #000000;
  --color-label-paper: #ffffff;
  --label-plain-filter: grayscale(1) contrast(2);
  --label-rule: 2px;
  --label-border-w: 1.5px;   /* the line around a label, drawn inside the edge so a thermal printer's feed shift never clips it */
  --label-border-inset: 0.08in;
  --label-border-radius: 0.12in;   /* rounded corners on the line around a label */
  --label-shift-x: 0mm;   /* Printer fit: move the printed label (set by data-sx, data-sy and data-fit on the label) */
  --label-shift-y: 0mm;
  --label-fit-scale: 1;
  /* Printer fit steps: 1 mm nudges and size percentages, used by the data-sx, data-sy and data-fit rules in commerce.css */
  --label-nudge-n6: -6mm;
  --label-nudge-n5: -5mm;
  --label-nudge-n4: -4mm;
  --label-nudge-n3: -3mm;
  --label-nudge-n2: -2mm;
  --label-nudge-n1: -1mm;
  --label-nudge-p0: 0mm;
  --label-nudge-p1: 1mm;
  --label-nudge-p2: 2mm;
  --label-nudge-p3: 3mm;
  --label-nudge-p4: 4mm;
  --label-nudge-p5: 5mm;
  --label-nudge-p6: 6mm;
  --label-fit-90: 0.9;
  --label-fit-91: 0.91;
  --label-fit-92: 0.92;
  --label-fit-93: 0.93;
  --label-fit-94: 0.94;
  --label-fit-95: 0.95;
  --label-fit-96: 0.96;
  --label-fit-97: 0.97;
  --label-fit-98: 0.98;
  --label-fit-99: 0.99;
  --label-fit-100: 1;

  /* ---- embedded icons (data URIs cannot read variables, so their colors live here) ---- */
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2386868b' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");

  /* ---- breakpoints (documentation only: custom properties cannot be used inside @media) ----
     --bp-phone: 640px   --bp-tablet: 820px   --bp-laptop: 980px                              */
}