/* =========================================================================
   DMLP Design System — BRD-aligned
   Canonical tokens for typography, color and spacing across the entire
   DMLP web prototype (marketing site + 7 role portals + live bid room).
   Loaded BEFORE each page's inline <style>, so per-page styles can extend
   or override. Per BRD: ATI brand palette, Calibri, defined font scale,
   minimal animation, consistent spacing.
   ========================================================================= */

:root {
  /* ---------- ATI brand colors (per BRD) ---------- */
  --ati-green:  rgb(0,145,71);
  --ati-amber:  rgb(250,168,25);
  --ati-red:    rgb(219,39,39);
  --ati-yellow: rgb(255,219,0);
  --ati-olive:  rgb(145,172,52);
  --ati-brown:  rgb(98,86,65);
  --ati-teal:   rgb(111,204,221);

  /* Shades — used by both naming conventions across the codebase */
  --green:        rgb(0,145,71);
  --green-pale:   rgb(230,248,238);
  --green-dark:   rgb(0,100,50);
  --amber:        rgb(250,168,25);
  --amber-pale:   rgb(255,246,220);
  --amber-dark:   rgb(190,120,10);
  --red:          rgb(219,39,39);
  --red-pale:     rgb(253,232,232);
  --red-dark:     rgb(160,20,20);
  --yellow:       rgb(255,219,0);
  --yellow-pale:  rgb(255,250,210);
  --yellow-dark:  rgb(195,165,0);
  --olive:        rgb(145,172,52);
  --olive-pale:   rgb(240,246,218);
  --olive-dark:   rgb(76,98,16);
  --brown:        rgb(98,86,65);
  --brown-pale:   rgb(245,242,237);
  --brown-dark:   rgb(62,52,38);
  --teal:         rgb(111,204,221);
  --teal-pale:    rgb(230,248,253);
  --teal-dark:    rgb(60,155,175);

  /* Compact aliases used by marketing pages (index, trader, warehouse, marketplace) */
  --gp: var(--green-pale);  --gd: var(--green-dark);  --gm: rgb(0,115,55);
  --ap: var(--amber-pale);  --ad: var(--amber-dark);
  --rp: var(--red-pale);    --rd: var(--red-dark);
  --op: var(--olive-pale);  --od: var(--olive-dark);
  --bp: var(--brown-pale);  --bd: var(--brown-dark);
  --tp: var(--teal-pale);   --td: var(--teal-dark);

  /* ---------- Typography (BRD) ---------- */
  /* Calibri requested; fall back to web-safe sans for environments without it. */
  --font-family: 'Calibri','Trebuchet MS','Gill Sans',sans-serif;
  --font: var(--font-family);
  --f:    var(--font-family);

  /* Font scale — BRD specifies pt; we map to px (web standard) preserving range. */
  --fs-page-title:    28px;  /* BRD: Page Titles 24-32 pt, bold */
  --fs-section-head:  20px;  /* BRD: Section Headings 18-20 pt, bold */
  --fs-body:          15px;  /* BRD: Body Text 14-16 pt, regular */
  --fs-nav:           15px;  /* BRD: Navigation Menus 14-16 pt, bold */
  --fs-product-title: 17px;  /* BRD: Product Titles 16-18 pt, bold */
  --fs-product-desc:  13px;  /* BRD: Product Descriptions 12-14 pt, regular */
  --fs-btn:           14px;  /* BRD: Buttons 14-16 pt, bold */
  --fs-footer:        12px;  /* BRD: Footers 12 pt, regular */
  --fs-meta:          11px;  /* helper text / chips / micro-captions */

  /* Spacing scale — kept consistent across portals */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
}

/* ---------- Base resets aligned with BRD ----------
   Per-page :root overrides win because this file is loaded first.
   These body/element rules are loaded BEFORE inline styles too so any
   selector in the page's <style> takes precedence. */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-family); }

/* Honor "minimal animation" preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}