/*
  Design tokens extracted from natiu.es (Webflow site, Sept 2026 snapshot).
  Source of truth for colors/type/spacing lives on natiu.es itself — this
  file mirrors it so new HTML/CSS/JS pages stay visually consistent.
  Re-check against the live site if the Webflow project is restyled.
*/

:root {
  /* Color: text */
  --color-text: #0e082e;       /* headings, primary body text */
  --color-text-ii: #36343c;    /* secondary heading/body tone */
  --color-grey-text: #252525;  /* muted body copy, nav links */
  --color-muted: #939394;      /* captions, metadata, timestamps */
  --color-body-copy: #444;     /* long-form paragraph text */

  /* Color: brand */
  --color-violet: #685696;     /* primary brand color — CTA sections, stat banners */
  --color-pink: #d38ec7;       /* secondary accent — buttons, highlights, hover glow */
  --color-pink-soft: #edcae7;  /* pink tint for subtle backgrounds/borders */
  --color-ink: #1a1b1f;        /* near-black button fill (button-primary) */

  /* Color: surface */
  --color-white: #fff;
  --color-surface-alt: #f8f8f8;  /* light section background */
  --color-surface-grey: #f1f1f1; /* alternate light section background */
  --color-border: #eae7f0;       /* hairline dividers on light surfaces */

  /* Typography */
  --font-heading: "Inter", sans-serif;      /* h1–h4, numbers, labels */
  --font-body: "Open Sans", sans-serif;     /* paragraphs, CTA banners */
  --font-alt: "Mulish", sans-serif;         /* incidental text blocks */
  --font-accent: "Poppins", sans-serif;     /* loaded site-wide, reserve for emphasis */

  /* Type scale (desktop) */
  --text-h1: 64px;         /* line-height 120% */
  --text-h1-hero: 70px;    /* banner-home h1, letter-spacing -2px, centered */
  --text-h2: 40px;         /* line-height 120%, weight 600 */
  --text-h3: 24px;
  --text-h4: 20px;         /* also used as .heading base size */
  --text-stat-number: 45px;/* number-banner, weight 600 */
  --text-body-lg: 20px;    /* text-banner (hero subhead), weight 500 */
  --text-body: 18px;       /* paragraph, weight 400 */
  --text-small: 16px;
  --text-label: 12px;      /* button-primary label, letter-spacing 2px, uppercase */

  /* Type scale (mobile / tablet breakpoint ~768px) */
  --text-h2-mobile: 35px;
  --text-h4-mobile: 18px;
  --text-stat-number-mobile: 35px;

  /* Spacing (section rhythm) */
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 20px;
  --space-lg: 40px;
  --space-xl: 60px;
  --space-2xl: 100px;
  --space-3xl: 120px;

  /* Layout */
  --container-max: 1300px;    /* .container */
  --container-narrow-max: 1000px; /* .container-2 */
  --container-padding-x: 40px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* Shadow */
  --shadow-pink: 0 2px 5px 1px rgba(211, 142, 199, 0.2); /* #d38ec733 */
  --shadow-soft: 0 10px 20px rgba(0, 0, 0, 0.09);        /* #00000017 */
  --shadow-card: 0 3px 10px rgba(150, 163, 181, 0.2);    /* #96a3b533 */

  /* Motion */
  --ease-standard: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-fast: 0.2s;
}