/* ═════════════════════════════════════════════════════════════════
   RIVIO — Design tokens
   Extracted 1:1 from Figma · RIVIO / [DESKTOP] Rivio Home v10
   node 623:74150 · design frame 1440 × 816
   ═════════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Funnel Display';
  src: url('../assets/fonts/FunnelDisplay-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Funnel Sans';
  src: url('../assets/fonts/FunnelSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bai Jamjuree';
  src: url('../assets/fonts/BaiJamjuree-Medium-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bai Jamjuree';
  src: url('../assets/fonts/BaiJamjuree-Medium-latinext.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bai Jamjuree';
  src: url('../assets/fonts/BaiJamjuree-SemiBold-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bai Jamjuree';
  src: url('../assets/fonts/BaiJamjuree-SemiBold-latinext.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Color · Figma variables ─────────────────────────────────── */
  --light-01: #f7f9ff;               /* Light Colors/Light-01 */
  --dark-02: #31353d;                /* Dark Colors/Dark-02   */
  --dark-05: #7a8599;                /* Dark Colors/Dark-05   */
  --blue: #6694ff;                   /* Brand/Blue/Base       */
  --yellow: #ffbe78;                 /* Brand/Yellow/Base     */

  --light-80: rgba(255, 255, 255, 0.8);   /* Shades/Ligh Shade/Light-80 */
  --light-64: rgba(255, 255, 255, 0.64);  /* Shades/Ligh Shade/Light-64 */
  --light-48: rgba(255, 255, 255, 0.48);  /* Shades/Ligh Shade/Light-48 */
  --light-32: rgba(255, 255, 255, 0.32);  /* Shades/Ligh Shade/Light-32 */
  --dark-88: rgba(0, 0, 0, 0.88);         /* Shades/Dark Shade/Dark-88  */

  /* Intelligence stage ground — soft light gradient */
  --intel-bg: radial-gradient(
      118% 92% at 62% 44%,
      #ffffff 0%,
      #fbfcfe 38%,
      #f4f6fc 72%,
      #eff3fb 100%
    );

  /* ── Type ────────────────────────────────────────────────────── */
  --font-display: 'Funnel Display', 'Funnel Sans', system-ui, -apple-system, sans-serif;
  --font-label: 'Bai Jamjuree', system-ui, -apple-system, sans-serif;

  /* ── Layout · design px @1440 ────────────────────────────────── */
  --design-w: 1440;
  --design-h: 816;
  --gutter: clamp(20px, 2.222vw, 32px);   /* 32px @1440 */

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.26, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0.02, 0.2, 1);

  /* Length of the Intelligence scroll track, beyond the sticky screen.
     6 layer steps + title dock ≈ 620vh of scrub. */
  --intel-range: 620vh;
}

@media (max-width: 900px) {
  :root {
    --intel-range: 520vh;
  }
}