/*
 * vanlo-ui design tokens: taken from the Vanlo Figma file
 * (figma.com/design/FMYa7F0LMCpfj2yB8hshIw). Every value maps to a Figma style.
 * Fonts (Google Fonts):
 *   <link href="https://fonts.googleapis.com/css2?family=Funnel+Sans:wght@300;400;500&family=Anek+Devanagari:wght@600&display=swap" rel="stylesheet">
 */

:root {
  /* ---------- colors (Figma style names in comments) ---------- */
  --vanlo-red: #e33030;        /* Theme Colors/Color 01: the ONLY accent */
  --vanlo-red-hover: #c92424;  /* derived: hover/pressed red */
  --vanlo-ink: #0e0e0e;        /* Neutral 04: headings, logo, footer background */
  --vanlo-body: #4d4b48;       /* Neutral 03: body copy, nav links (warm grey) */
  --vanlo-sand: #e5e1dd;       /* Neutral 02: hairlines, footer small print */
  --vanlo-paper: #f5f4f2;      /* Neutral 01: alternate section background, FAQ rows */
  --vanlo-white: #ffffff;      /* White: sections, cards on paper, nav pill */

  /* ---------- overlays ---------- */
  --vanlo-scrim: linear-gradient(180deg,          /* hero: darkens bottom 83% of a photo */
      rgba(0,0,0,0) 5%, rgba(0,0,0,.41) 54%, rgba(0,0,0,.5) 74%, rgba(0,0,0,.63) 100%);
  --vanlo-scrim-footer: linear-gradient(0deg,     /* CTA + footer: photo fades into ink */
      #0e0e0e 4%, rgba(14,14,14,.94) 21%, rgba(14,14,14,.92) 33%, rgba(14,14,14,.85) 43%,
      rgba(14,14,14,.78) 63%, rgba(14,14,14,.65) 76%, rgba(14,14,14,.5) 86%,
      rgba(14,14,14,.35) 92%, rgba(14,14,14,0) 100%);

  /* ---------- type ---------- */
  --vanlo-font: "Funnel Sans", ui-sans-serif, system-ui, sans-serif;
  --vanlo-font-logo: "Anek Devanagari", var(--vanlo-font);

  /* ---------- shape / layout ---------- */
  --vanlo-pill: 999px;         /* nav bar + every button */
  --vanlo-radius: 12px;        /* every card, photo, video, FAQ row, icon tile */
  --vanlo-gutter: 48px;        /* side margin at 1600px */
  --vanlo-max: 1504px;         /* content width */
  --vanlo-section-y: 128px;    /* standard section padding */
  --vanlo-head-gap: 88px;      /* section header → content */
  --vanlo-card-gap: 16px;      /* gap between cards in a row */

  /* ---------- motion ---------- */
  --vanlo-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---------- type roles: Figma text styles, exact ---------- */
.vanlo-h1 { font: 400 72px/1.02 var(--vanlo-font); letter-spacing: -3px; }    /* Headline/H1 Display */
.vanlo-h2 { font: 400 48px/1.1  var(--vanlo-font); letter-spacing: -2.5px; }  /* Headline/H2: every section title + stat numbers */
.vanlo-h3 { font: 400 42px/1.15 var(--vanlo-font); letter-spacing: -1.2px; }  /* Headline/H3: manifesto paragraph */
.vanlo-h4 { font: 400 32px/1.3  var(--vanlo-font); letter-spacing: -0.5px; }  /* Headline/H4: blog titles */
.vanlo-h5 { font: 400 24px/1.36 var(--vanlo-font); letter-spacing: -0.5px; }  /* Headline/H5: card titles */
.vanlo-quote { font: 400 22px/1.56 var(--vanlo-font); letter-spacing: -0.5px; } /* Body/20px/Medium 22: testimonials */
.vanlo-lead  { font: 400 20px/1.56 var(--vanlo-font); letter-spacing: -0.5px; } /* Body/20px/Medium: FAQ questions, feature titles */
.vanlo-body-lg { font: 300 18px/1.56 var(--vanlo-font); letter-spacing: -0.5px; } /* Body/18px/Regular (Light) */
.vanlo-body-lg-strong { font: 400 18px/1.56 var(--vanlo-font); letter-spacing: -0.5px; } /* Body/18px/Medium */
.vanlo-name { font: 500 18px/1.56 var(--vanlo-font); letter-spacing: -0.5px; }  /* Body/18px/SemiBold: person names */
.vanlo-body-md { font: 300 16px/1.56 var(--vanlo-font); letter-spacing: -0.5px; } /* Body/16px/Regular (Light) */
.vanlo-body  { font: 400 14px/1.56 var(--vanlo-font); letter-spacing: -0.5px; }  /* Body/14px/Medium: nav, buttons */
.vanlo-body-sm { font: 300 14px/1.56 var(--vanlo-font); letter-spacing: -0.5px; } /* Body/14px/Regular (Light) */
.vanlo-logo {
  font: 600 32px/1.5 var(--vanlo-font-logo);
  letter-spacing: -3px; text-transform: uppercase; color: var(--vanlo-ink);
}

/* ---------- responsive steps (same ratios, smaller sizes) ---------- */
@media (max-width: 1024px) {
  :root { --vanlo-gutter: 32px; --vanlo-section-y: 96px; --vanlo-head-gap: 56px; }
  .vanlo-h1 { font-size: 56px; letter-spacing: -2.4px; }
  .vanlo-h2 { font-size: 40px; letter-spacing: -2px; }
  .vanlo-h3 { font-size: 32px; letter-spacing: -1px; }
}
@media (max-width: 640px) {
  :root { --vanlo-gutter: 16px; --vanlo-section-y: 72px; --vanlo-head-gap: 40px; }
  .vanlo-h1 { font-size: 40px; letter-spacing: -1.6px; line-height: 1.05; }
  .vanlo-h2 { font-size: 34px; letter-spacing: -1.5px; }
  .vanlo-h3 { font-size: 26px; letter-spacing: -0.8px; }
  .vanlo-h4 { font-size: 24px; }
  .vanlo-quote { font-size: 19px; }
  .vanlo-body-lg { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; translate: none !important; scale: none !important; }
}

/* Tailwind v4: expose tokens as utilities (bg-vanlo-red, bg-vanlo-paper, text-vanlo-body, rounded-vanlo, font-vanlo…) */
@theme inline {
  --color-vanlo-red: var(--vanlo-red);
  --color-vanlo-ink: var(--vanlo-ink);
  --color-vanlo-body: var(--vanlo-body);
  --color-vanlo-sand: var(--vanlo-sand);
  --color-vanlo-paper: var(--vanlo-paper);
  --radius-vanlo: var(--vanlo-radius);
  --font-vanlo: var(--vanlo-font);
  --font-vanlo-logo: var(--vanlo-font-logo);
}