/* Design tokens — Retail Analytics by Astara Intelligence.
   Palette and fluid-unit approach adapted from the Astara/PCI deck (not copied wholesale). */
:root {
  color-scheme: dark;

  --ink: #070d1d;
  --ink-2: #0c1830;
  --sky: #8bcdff;
  --navy: #151a34;   /* RA logo tile */

  --t1: #f4f8ff;
  --t2: rgba(214, 228, 248, .80);
  --t3: rgba(182, 201, 226, .74);

  --edge: rgba(235, 244, 255, .13);
  --edge-hi: rgba(235, 244, 255, .30);

  --f: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fn: 'Inter', 'Manrope', system-ui, sans-serif;

  --e: cubic-bezier(.32, .72, 0, 1);
  --eo: cubic-bezier(.16, 1, .3, 1);

  /* --u = 1/100 of the largest 16:9 that fits the screen (19.2px at 1920×1080). */
  --u: min(1vw, 1.7778vh);
  --px: max(22px, calc(var(--u) * 5.2));
  --nav-h: max(46px, calc(var(--u) * 2.9));
  --nav-b: max(12px, calc(var(--u) * 1.3));
  --pb: calc(var(--nav-h) + var(--nav-b) + max(18px, calc(var(--u) * 2.2)));
}

/* Portrait / narrow screens: compose in a column, bigger relative type. */
@media (max-aspect-ratio: 5/4) {
  :root { --u: min(1.9vw, 1.05vh); --px: max(20px, calc(var(--u) * 3.2)); }
}