/* Giorgetti design tokens. Source of truth: DESIGN.md (system 7 of 10).
   Graphite ground, steel panels, steel cyan accent, chamfered corners, 16 columns at 1600.

   Type sizes here are two notches above the draft in DESIGN.md on purpose. The client read the
   Poliform build and asked for it, and the figures in the brief are the floor rather than the
   target: body text is 18px, the smallest type anywhere on the site is 14px, form fields are
   18px so iOS never zooms, and the display size is capped at 80px instead of the 104px the
   spec drafted. Expanded Archivo in caps with open tracking is hard to read small, so caps
   stay at 14px and live only in navigation, spec labels and table heads. */
:root {
  /* colour */
  --bg: #1F2327;                /* graphite, page */
  --ink: #E7ECEF;               /* text on graphite */
  --muted: #A3ADB5;             /* secondary text on graphite and on panels */
  --panel: #2B3137;             /* panels: cards, header, forms, footer colophon */
  --panel-2: #333A41;           /* panel inside a panel, table header row */
  --light: #E7ECEF;             /* light section for long prose */
  --plate: #FFFFFF;             /* the sheet a cut-out is photographed on, matched exactly */
  --on-light: #1F2327;
  --on-light-muted: #4C555C;
  --accent: #7FB3BF;            /* steel cyan */
  --on-accent: #1F2327;
  --outline: rgba(231, 236, 239, 0.18);
  --outline-strong: rgba(231, 236, 239, 0.45);
  --outline-light: rgba(31, 35, 39, 0.20);
  --error: #E88C7D;
  --ok: #8FBF9B;
  --scrim: rgba(15, 18, 20, 0.55);

  /* type */
  --display: 'Archivo', 'Archivo Fallback', 'Arial Narrow', Arial, sans-serif;
  --text: 'Public Sans', 'Public Sans Fallback', Arial, sans-serif;
  --wide: 'wdth' 125;           /* the expanded axis, the whole point of Archivo here */

  --fs-display: clamp(30px, 4.8vw, 62px);
  --fs-h2: clamp(26px, 3.2vw, 42px);
  --fs-h3: clamp(20px, 1.7vw, 25px);
  --fs-lead: clamp(19px, 1.6vw, 22px);
  --fs-body: 18px;
  --fs-small: 15px;
  --fs-label: 14px;             /* caps, tracked; nothing on the site is smaller than this */
  --fs-input: 18px;
  --track-label: 0.12em;
  --track-display: 0.02em;

  /* space: 4px unit, the finest grid in the network, for drawing-sheet precision */
  --u: 4px;
  --container: 1600px;
  --text-col: 680px;
  --cols: 16;
  --gutter: 12px;
  --margin: 16px;
  --section: 72px;
  --panel-pad: 20px;
  --head-h: 56px;

  /* shape: a chamfer on two opposite corners, no radius anywhere in the system */
  --chamfer: 14px;
  --chamfer-sm: 10px;
  --cut: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  --cut-sm: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm));
  --cut-bottom: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%);

  /* motion */
  --t-fast: 140ms;
  --t-mid: 240ms;
  --t-slow: 380ms;
  --ease-in: cubic-bezier(.2, .6, .35, 1);
  --ease-out: cubic-bezier(.5, 0, .75, .2);

  /* layers */
  --z-head: 40;
  --z-mega: 45;
  --z-sheet: 60;
}

@media (min-width: 480px) {
  :root { --margin: 24px; --panel-pad: 24px; }
}
@media (min-width: 768px) {
  :root { --gutter: 16px; --margin: 32px; --section: 100px; --panel-pad: 32px; --head-h: 64px; --chamfer: 16px; }
}
@media (min-width: 1080px) {
  :root { --gutter: 20px; --margin: 40px; --section: 120px; --panel-pad: 40px; --head-h: 72px; --chamfer: 18px; }
}
@media (min-width: 1440px) {
  :root { --margin: 56px; --section: 136px; }
}