/* Perspective Studios — design tokens (v0.1, 13/11/2026)
   Single source for colours, type, spacing, grid, radii and motion.
   Every page and example imports this file. Values are measured, not guessed:
   greys = The Giver (pipette, see palette-the-giver.md), accent = Prugna A (chosen 13/11). */

@font-face{font-family:"Big Shoulders Display";src:url(fonts/big-shoulders-display-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  /* — Neutrals (The Giver, slightly cool, no pure black) — */
  --perla:#F3F4F5;   /* page background */
  --g7:#FBFCFC;      /* "luce": cards, raised surfaces */
  --g6:#CCCDCF;      /* lines, borders, never text on light */
  --g5:#9C9DA0;      /* decorative only on light; secondary text on dark */
  --g4:#737478;      /* placeholder, disabled */
  --g3:#5E5F61;      /* secondary text (5.8:1 on Perla) */
  --g2:#49494B;
  --g1:#353536;      /* primary text, dark sections */

  /* — Accent: Prugna (function only: actions + the three services) — */
  --plum-design:#3A2340;      /* Digital design · hover/pressed */
  --plum-deploy:#5B3563;      /* Digital deployment · primary buttons */
  --plum-market:#846389;      /* Digital marketing · lightest usable for text */
  --plum-veil:#E9E1EA;        /* tinted backgrounds, inverted buttons on dark */

  --line:rgba(53,53,54,.14);
  --line-strong:rgba(53,53,54,.28);

  /* — Type — */
  --font-display:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --font-text:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --t-display-xl:clamp(72px,12vw,200px);
  --t-display-l:clamp(56px,8vw,128px);
  --t-h1:clamp(44px,5.6vw,88px);
  --t-h2:clamp(34px,3.8vw,56px);
  --t-h3:clamp(24px,2.2vw,32px);   /* Inter 600 */
  --t-lead:clamp(19px,1.6vw,23px);
  --t-body:17px;
  --t-small:14px;
  --t-eyebrow:12px;

  /* — Spacing (base 8, with 4 for fine tuning) — */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:192px;
  --section:clamp(96px,12vw,192px);   /* vertical space between sections */

  /* — Grid — */
  --max:1320px;
  --margin:clamp(20px,5vw,80px);
  --gutter:clamp(16px,2vw,24px);
  --cols:12;

  /* — Radii: the circle↔square motif lives here too — */
  --r-s:8px; --r-m:14px; --r-l:22px; --r-pill:999px;

  /* — Motion — */
  --ease-out:cubic-bezier(.2,.7,.1,1);      /* "Perspective ease": quick start, soft landing */
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --d-1:150ms; --d-2:250ms; --d-3:450ms; --d-4:800ms;
}

@media (prefers-reduced-motion:reduce){
  :root{--d-1:0ms;--d-2:0ms;--d-3:0ms;--d-4:0ms}
}