/* ============================================================
   VEHIX — Homepage rebuild v2 · DESIGN TOKENS
   Editorial / magazine direction: Newsreader (serif display) +
   Hanken Grotesk (sans body), warm "paper" palette, per-product
   accent hues, tasteful grain / gradient / glass depth.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap');

:root {
  /* ---- COLOR · warm paper editorial base ---- */
  --paper:    #fbfaf6;   /* base surface (warm near-white)     */
  --paper-2:  #f3f1ea;   /* alternating section                */
  --paper-3:  #ece9df;   /* tags / faint fills                 */
  --ink-bg:   #131210;   /* deep warm-black "moment"           */
  --ink-bg-2: #1e1c18;   /* raised surface on ink              */

  --ink:    #1a1916;     /* primary text (warm near-black)     */
  --ink-2:  #5f5b53;     /* secondary text                     */
  --ink-3:  #938e83;     /* tertiary / captions                */
  --on-ink:    #f4f1ea;  /* primary text on dark               */
  --on-ink-2:  #a8a39a;  /* secondary text on dark             */

  /* ---- Per-product accents ---- */
  --blue:        #2563eb;  --blue-on-ink:   #5b91ff;  --blue-soft:   #e7eefc;
  --violet:      #7c3aed;  --violet-on-ink: #a78bfa;  --violet-soft: #efe8fd;
  --amber:       #b8791b;  --amber-on-ink:  #e6b454;  --amber-soft:  #f6ecd8;

  /* default accent (hero / nav) = ink-forward, brand blue as link */
  --accent:      var(--blue);
  --accent-glow: rgba(37,99,235,.16);

  --hairline:     rgba(26,25,22,.12);
  --hairline-2:   rgba(26,25,22,.07);
  --hairline-ink: rgba(255,255,255,.13);

  /* ---- TYPE ---- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.9rem, 1.2rem + 7vw, 6rem);       /* 46 → 96 */
  --fs-h2:      clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);   /* 34 → 58 */
  --fs-h3:      clamp(1.5rem, 1.25rem + 1.1vw, 2rem);    /* 24 → 32 */
  --fs-lead:    clamp(1.2rem, 1.08rem + .55vw, 1.55rem); /* 19 → 25 */
  --fs-body:    clamp(1.0625rem, 1.0rem + .25vw, 1.1875rem);/* 17 → 19 */
  --fs-cap:     0.78rem;

  --lh-tight: 1.02; --lh-snug: 1.1; --lh-body: 1.6;
  --tr-display: -0.02em; --tr-tight: -0.012em; --tr-kicker: .18em;
  --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700;

  /* ---- SPACE / LAYOUT ---- */
  --section-y: clamp(5.5rem, 3rem + 9vw, 11rem);
  --maxw: 1160px;
  --maxw-text: 760px;
  --gutter: clamp(22px, 5vw, 48px);

  /* ---- RADIUS ---- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* ---- BLUR / ELEVATION ---- */
  --blur-nav: saturate(180%) blur(22px);
  --elev-1: 0 1px 2px rgba(40,33,20,.06), 0 8px 22px rgba(40,33,20,.06);
  --elev-2: 0 8px 24px rgba(40,33,20,.09), 0 28px 64px rgba(40,33,20,.12);
  --elev-3: 0 50px 110px rgba(30,24,12,.22);
  --elev-ink: 0 40px 100px rgba(0,0,0,.6);

  /* ---- MOTION ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .8s;
  --dur-fast: .22s;

  /* ---- BRIGHT APP PALETTE (auto-cycles for new apps) ----
     Each app "world" claims the next color. Add an app → it just
     takes the next hue in this ring. ink = text color for contrast. */
  --c-blue:   #1f4dff;   --c-yellow: #ffc400;   --c-red:    #ff3b30;
  --c-green:  #00b269;   --c-violet: #7c3aed;   --c-orange: #ff6a1a;
  --c-teal:   #00b4c8;   --c-pink:   #ff4d8d;

  /* directional reveal distance */
  --rv: 48px;
}