/* ============================================================
   IASIA — design tokens
   Type scale, colour, spacing and easing primitives.
   Fluid sizes follow the original's calc() ramp between the
   375px and 1440px viewports.
   ============================================================ */

:root {
  /* ---- Colour ----------------------------------------------
     The palette is black, white and a neutral grey ramp — no
     hue anywhere. Emphasis is carried by tone, weight and
     inversion rather than by an accent colour.                 */
  --black: #000;
  --white: #fff;
  --grey: #757575;
  --grey-light: #cacaca;
  --grey-rule: #e5e5e5;
  --grey-mid: #8c8c8c;         /* rules that must read on black and white */
  --paper: #f2f2f2;
  --paper-dim: #e4e4e4;

  /* ---- Type ------------------------------------------------
     Akzidenz-Grotesk is an Adobe/Berthold licensed face and is
     not redistributable, so the stack falls through to the
     closest ubiquitous neo-grotesques. Drop a licensed
     akzidenz-grotesk webfont in assets/fonts and it takes over
     automatically.                                             */
  --font-sans: "akzidenz-grotesk", "Helvetica Neue", Helvetica,
               "Inter", "Arial Nova", Arial, sans-serif;

  /* fluid ramp: min at 375px viewport, max at 1440px */
  --fs-h1: clamp(75px, calc(75px + 95 * ((100vw - 375px) / 1065)), 170px);
  --fs-h2: clamp(38px, calc(38px + 10 * ((100vw - 375px) / 1065)), 48px);
  --fs-h3: clamp(24px, calc(24px + 8 * ((100vw - 375px) / 1065)), 32px);
  --fs-h6: clamp(13px, calc(13px + 3 * ((100vw - 375px) / 1065)), 16px);
  --fs-body: clamp(17px, calc(17px + 4 * ((100vw - 375px) / 1065)), 21px);
  --fs-caption: clamp(12px, calc(12px + 2 * ((100vw - 375px) / 1065)), 14px);
  --fs-display: clamp(64px, 13vw, 200px);

  --lh-tight: 0.91176;
  --lh-head: 1.08333;
  --lh-body: 1.24;
  --ls-head: -2px;

  /* ---- Layout ---------------------------------------------- */
  --container-max: 90rem;      /* 1440px */
  --gutter: 1.25rem;           /* Foundation grid-margin-x */
  --pad-x: 2.1875rem;          /* 35px  small  */
  --pad-x-md: 2.5rem;          /* 40px  medium+ */
  --menu-w: 375px;
  --menu-w-md: 560px;
  --nav-w: 190px;

  /* ---- Motion ---------------------------------------------- */
  --dur-fast: 250ms;
  --dur: 300ms;
  --dur-slow: 1700ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);

  /* ---- Depth ----------------------------------------------- */
  --z-nav: 10000;
  --z-menu: 900;
}

@media print, screen and (min-width: 48em) {
  :root { --pad-x: var(--pad-x-md); }
}