/* =========================================================
   VS Works — Site A "Reitti" — design tokens
   Edit this file to tune colours, type, spacing and motion.
   Brand source: VS_Works_Brand_Guide_2026_v2 (Cloud Dancer /
   VS Ink / Burnt Sienna; Space Grotesk / Karla / IBM Plex Mono)
   ========================================================= */
:root {
  /* Colour — 86 % cloud, 12 % ink, 2 % sienna (action only) */
  --cloud: #F0EEE9;
  --cloud-2: #E9E6DF;          /* slightly deeper paper for plates */
  --ink: #071225;
  --ink-70: rgba(7, 18, 37, .70);
  --ink-50: rgba(7, 18, 37, .50);
  --ink-30: rgba(7, 18, 37, .30);
  --ink-14: rgba(7, 18, 37, .14);  /* hairlines */
  --ink-08: rgba(7, 18, 37, .08);  /* grid lines */
  --sienna: #C46157;
  --sienna-deep: #8F4438;       /* only for hover on sienna text / large text */
  --marina: #5085C3;            /* diagram support colour only */
  --sage: #B2AC88;              /* diagram support colour only */
  --cloud-on-ink-70: rgba(240, 238, 233, .70);
  --cloud-on-ink-14: rgba(240, 238, 233, .14);

  /* Type */
  --f-head: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Karla", "Inter", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(2.75rem, 1.2rem + 6.2vw, 6rem);   /* 44 → 96 */
  --fs-h1: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);      /* 36 → 60 */
  --fs-h2: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);         /* 28 → 40 */
  --fs-h3: 1.375rem;                                     /* 22 */
  --fs-body: 1.125rem;                                   /* 18 / 27 */
  --fs-small: 0.9375rem;                                 /* 15 */
  --fs-label: 0.75rem;                                   /* 12 / 16 */
  --lh-tight: 0.98;
  --lh-head: 1.05;
  --lh-body: 1.5;
  --track-tight: -0.03em;
  --track-label: 0.14em;

  /* Rhythm — 8 pt base */
  --s-1: .5rem;  --s-2: 1rem;  --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4rem;  --s-7: 6rem;    --s-8: 8rem;
  --section-y: clamp(4rem, 9vw, 8rem);

  /* Layout */
  --frame: clamp(12px, 2vw, 24px);   /* page frame inset (hairline) */
  --gutter: clamp(1rem, 3vw, 2rem);
  --measure: 34rem;                  /* ≈ 62 characters at 18 px */
  --max: 88rem;
  --hairline: 1px solid var(--ink-14);
  --radius: 0;                       /* brand: no rounded corners */
  --tap: 44px;

  /* Motion — progress only, never looping */
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 720ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --focus: 2px solid var(--sienna);
  --focus-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; }
}