/* ==========================================================================
   variables.css - LivexFlow design tokens
   Derived from Figma: file ML7v2KRS3ZFg1JyeaNLa16, canvas "New Web Design" (382:675).
   The Figma file publishes no variables, so every token below is a raw observed
   value, clustered where the source used near-duplicates.
   Do not hardcode colours, type sizes, radii or shadows anywhere else.
   ========================================================================== */

:root {
  /* ---------- Brand: blue ramp ------------------------------------------ */
  --c-blue-900: #007bd3;
  --c-blue-800: #0080b7;
  --c-blue-700: #008fcc;
  --c-blue-600: #04aaf1;   /* primary */
  --c-blue-500: #09b5c8;
  --c-blue-400: #20bcff;
  --c-blue-300: #44c7ff;
  --c-blue-200: #67ddff;
  --c-blue-100: #00c8ff;

  --c-primary: var(--c-blue-600);
  --c-primary-ink: #ffffff;

  /* ---------- Accents ---------------------------------------------------- */
  --c-green-600: #00d37a;
  --c-green-500: #00c471;
  --c-green-400: #00ba6b;
  --c-green-300: #35be5e;
  --c-green-tint: #e7f6ef;

  --c-pink: #ff5dbc;
  --c-orange: #ff7206;
  --c-violet: #b441ba;
  --c-purple: #8244ff;
  --c-purple-light: #9e5dff;

  /* ---------- Ink (text) -------------------------------------------------- */
  --c-ink: #010101;
  --c-ink-strong: #000000;
  --c-ink-900: #121212;
  --c-ink-800: #252527;
  --c-ink-700: #313131;
  --c-ink-600: #4e4e4e;
  --c-ink-500: #7c7c7c;
  --c-ink-400: #ababab;

  /* ---------- Surfaces ---------------------------------------------------- */
  --c-white: #ffffff;
  --c-surface: #ffffff;
  --c-surface-alt: #f8f8f8;
  --c-surface-alt-2: #f0f0f0;
  --c-border: #dedede;
  --c-border-strong: #d9d9d9;

  /* ---------- Dark surfaces ----------------------------------------------- */
  --c-dark-navy: #090d2d;
  --c-dark-slate: #0a101c;
  --c-dark-900: #100d11;
  --c-dark-800: #090f1b;

  /* ---------- Alpha overlays (observed on glass / tinted chips) ----------- */
  --c-white-a10: rgba(255, 255, 255, 0.10);
  --c-white-a21: rgba(255, 255, 255, 0.21);
  --c-white-a22: rgba(255, 255, 255, 0.22);
  --c-white-a28: rgba(255, 255, 255, 0.28);
  --c-white-a46: rgba(255, 255, 255, 0.46);
  --c-white-a71: rgba(255, 255, 255, 0.71);
  --c-white-a77: rgba(255, 255, 255, 0.77);

  --c-blue-a08: rgba(4, 170, 241, 0.08);
  --c-blue-a11: rgba(4, 170, 241, 0.11);
  --c-blue-a14: rgba(4, 170, 241, 0.14);
  --c-blue-a16: rgba(4, 170, 241, 0.16);
  --c-blue-a25: rgba(4, 170, 241, 0.25);
  --c-green-a16: rgba(0, 196, 113, 0.16);
  --c-green3-a16: rgba(53, 190, 94, 0.16);
  --c-pink-a11: rgba(255, 93, 188, 0.11);
  --c-pink-a16: rgba(255, 93, 188, 0.16);
  --c-orange-a12: rgba(255, 114, 6, 0.12);
  --c-orange-a16: rgba(255, 114, 6, 0.16);
  --c-blue4-a16: rgba(32, 188, 255, 0.16);

  /* ---------- Gradients --------------------------------------------------- */
  --g-hero: linear-gradient(180deg, #007bd3 0%, #00c8ff 100%);
  --g-hero-diag: linear-gradient(135deg, #007bd3 0%, #00c8ff 100%);
  --g-mint: linear-gradient(135deg, #00d37a 0%, #0b99ff 100%);
  --g-cyan: linear-gradient(135deg, #00aee0 0%, #67ddff 45%, #0099bc 100%);
  --g-violet: linear-gradient(135deg, #b441ba 0%, #04aaf1 100%);
  --g-indigo: linear-gradient(135deg, #04aaf1 0%, #9e5dff 100%);
  --g-midnight: linear-gradient(180deg, #100d11 0%, #090f1b 100%);

  /* ---------- Type families ----------------------------------------------- */
  --ff-display: "Nunito", "Segoe UI", system-ui, sans-serif;   /* hero headlines */
  --ff-ui: "Poppins", "Segoe UI", system-ui, sans-serif;       /* nav, cards, UI */
  --ff-body: "Inter", "Segoe UI", system-ui, sans-serif;       /* long-form copy */

  /* ---------- Type scale (px values observed in Figma) -------------------- */
  --fs-display-2xl: 85px;  /* feature-page hero headlines */
  --fs-display-xl: 80px;
  --fs-display-lg: 75px;
  --fs-display-md: 70px;
  --fs-display-sm: 65px;
  --fs-h1: 64px;
  --fs-h2: 35px;
  --fs-h3: 32px;
  --fs-h4: 29px;
  --fs-h5: 25px;
  --fs-h6: 24px;
  --fs-lg: 22px;
  --fs-md: 20px;
  --fs-base: 18px;
  --fs-sm: 17px;
  --fs-xs: 15px;
  --fs-2xs: 14px;
  --fs-3xs: 12px;

  /* ---------- Weights ------------------------------------------------------ */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Line heights ------------------------------------------------- */
  --lh-tight: 1.1;      /* Nunito 75px hero */
  --lh-snug: 1.13;      /* Nunito 65px */
  --lh-display: 1.234;  /* Nunito 65px alt */
  --lh-normal: 1.45;
  --lh-loose: 1.54;     /* Figma 153.941% - dominant body leading */
  --lh-ui: 1.5;         /* Poppins auto */

  /* ---------- Letter spacing ----------------------------------------------- */
  --ls-none: 0;
  --ls-eyebrow: 0.15em;  /* Inter SemiBold 20px eyebrows, Figma ls 15% */

  /* ---------- Spacing scale ------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 60px;
  --sp-11: 72px;
  --sp-12: 90px;
  --sp-13: 120px;
  --sp-14: 160px;
  --sp-15: 200px;

  /* ---------- Radii --------------------------------------------------------- */
  --r-xs: 10px;
  --r-sm: 15px;
  --r-md: 24px;
  --r-lg: 29px;
  --r-xl: 38px;
  --r-2xl: 49px;
  --r-3xl: 60px;
  --r-4xl: 89px;
  --r-blob: 266px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---------- Borders ------------------------------------------------------- */
  --bw-hairline: 1px;
  --bw-thin: 1.5px;
  --bw-base: 2px;
  --bw-thick: 2.5px;
  --bw-heavy: 3px;
  --bw-chunky: 5px;

  /* ---------- Shadows ------------------------------------------------------- */
  --sh-xs: 0 0 10.9px rgba(0, 0, 0, 0.05);
  --sh-sm: 0 4px 18.1px rgba(0, 0, 0, 0.15);
  --sh-md: 0 4px 28.5px rgba(0, 0, 0, 0.08);
  --sh-lg: 0 4px 35.6px rgba(0, 0, 0, 0.06);
  --sh-xl: 0 4px 51px rgba(0, 0, 0, 0.07);
  --sh-2xl: 0 4px 79.3px rgba(0, 0, 0, 0.04);
  --sh-up: 0 -2px 36.9px rgba(0, 0, 0, 0.09);
  --sh-ring: 0 0 15.3px rgba(0, 0, 0, 0.12);
  --sh-drop: 0 4px 20.2px rgba(0, 0, 0, 0.25);

  /* Decorative background blobs use a very large blur in Figma (175.5px) */
  --blur-blob: 175px;
  --blur-glass: 4px;

  /* ---------- Layout --------------------------------------------------------- */
  --design-width: 1920px;
  --container-max: 1748px;
  --container-gutter: 60px;
  --container-gutter-tablet: 32px;
  --container-gutter-mobile: 20px;
  --header-height: 142px;
  --tap-target: 44px;

  /* ---------- Motion --------------------------------------------------------- */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-reveal: 640ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Z-index -------------------------------------------------------- */
  --z-below: -1;
  --z-base: 1;
  --z-decor: 2;
  --z-content: 3;
  --z-sticky: 50;
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 300;
}

/* Fluid type: the design is drawn at 1920. Below that we scale the display
   sizes down rather than letting 80px headlines overflow small viewports. */
@media (max-width: 1200px) {
  :root {
    --fs-display-2xl: clamp(42px, 7.0vw, 85px);
    --fs-display-xl: clamp(40px, 6.6vw, 80px);
    --fs-display-lg: clamp(38px, 6.2vw, 75px);
    --fs-display-md: clamp(36px, 5.8vw, 70px);
    --fs-display-sm: clamp(34px, 5.4vw, 65px);
    --fs-h1: clamp(32px, 5.2vw, 64px);
    --fs-h2: clamp(26px, 3.4vw, 35px);
    --fs-h3: clamp(24px, 3.1vw, 32px);
    --fs-h4: clamp(23px, 2.8vw, 29px);
    --fs-h5: clamp(21px, 2.4vw, 25px);
    --fs-h6: clamp(20px, 2.2vw, 24px);
  }
}

@media (max-width: 768px) {
  :root {
    --container-gutter: var(--container-gutter-tablet);
    --header-height: 72px;
    --sp-13: 72px;
    --sp-14: 90px;
    --sp-15: 120px;
  }
}

@media (max-width: 480px) {
  :root {
    --container-gutter: var(--container-gutter-mobile);
    --fs-lg: 19px;
    --fs-md: 17px;
    --fs-base: 16px;
    --sp-13: 56px;
    --sp-14: 72px;
    --sp-15: 90px;
  }
}