/* ============================================================
   RAUM — Design Tokens
   ------------------------------------------------------------
   Brand guide (STRICT):
   ink / paper background, wine as ACCENT ONLY (CTA, numbers,
   active states). Unbounded = display/headings/numbers,
   Inter = body. No decorative gradients or shadows.
   Load order: tokens.css → main.css → responsive.css
   ============================================================ */

/* Google Fonts — Unbounded (display) + Inter (body).
   @import must be the first statement in the file. */

:root{
  /* ---- Brand colors ---- */
  --ink:#111111;              /* text + dark sections           */
  --paper:#F5F5F5;            /* page background                */
  --wine:#A31C3C;             /* ACCENT ONLY: CTA / numbers / active */
  --wine-d:#851531;           /* wine hover / pressed           */
  --line:rgba(17,17,17,.12);  /* hairline dividers on light     */
  --muted:rgba(17,17,17,.55); /* secondary text on light        */

  /* ---- On-dark helpers (studio / b2b / footer) ---- */
  --on-dark:#ffffff;
  --on-dark-72:rgba(255,255,255,.72);
  --on-dark-66:rgba(255,255,255,.66);
  --on-dark-60:rgba(255,255,255,.6);
  --on-dark-50:rgba(255,255,255,.5);
  --on-dark-45:rgba(255,255,255,.45);
  --on-dark-40:rgba(255,255,255,.4);
  --on-dark-line:rgba(255,255,255,.18);
  --on-dark-hairline:rgba(255,255,255,.12);
  --reed-light:rgba(255,255,255,.045); /* vertical reed motif — dark sections only */
  --reed-b2b:rgba(255,255,255,.04);

  /* ---- Radii & motion ---- */
  --r:9px;
  --r-lg:14px;
  --ease:cubic-bezier(.4,0,.2,1);

  /* ---- Type families ---- */
  --font-display:'Unbounded',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'Courier New',ui-monospace,monospace;

  /* ---- Layout scale ---- */
  --maxw:1280px;              /* default content width          */
  --maxw-narrow:1080px;       /* comparison table column        */
  --gutter:clamp(20px,5vw,64px);
  --section-y:clamp(48px,6vw,96px);
  --section-y-lg:clamp(64px,8vw,120px);
  --grid-gap:16px;

  /* ---- Before/after slider position (JS updates this) ---- */
  --ba:50%;
}