/* nGrid design tokens, lifted from ngridenergy.com/en (Webflow CSS + logo SVG). */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&display=swap");

:root {
  /* Color */
  --ink: #231f20;        /* primary dark: text, dark sections, logo mark */
  --ink-soft: #272526;   /* raised dark surfaces */
  --ink-line: #3a3536;   /* hairlines on dark */
  --volt: #fff47b;       /* the one accent: primary button, highlights, CTA */
  --white: #ffffff;
  --paper: #fafafa;      /* light section background */
  --grey-200: #dfdfdf;   /* borders on light */
  --grey-400: #aaaaaa;   /* muted text on dark, plus-gradient middle */
  --grey-600: #666666;   /* muted text on light */

  /* Type */
  --font-head: "DM Sans", Arial, sans-serif;
  --font-body: "DM Sans", Arial, sans-serif;
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --step-3: clamp(2.5rem, 1.6rem + 4.5vw, 5.5rem);
  --step-4: clamp(3rem, 1.5rem + 7.5vw, 8.5rem);

  /* Shape and space */
  --r-sm: 0.25rem;
  --r-md: 1.25rem;
  --r-pill: 9999px;
  --gutter: clamp(16px, 5vw, 72px);
  --section: clamp(4rem, 10vw, 9rem);
  --ease: cubic-bezier(.2, .8, .2, 1);
}