/* ============================================================
   Designar design tokens
   Values extracted 1:1 from the AirPixel Webflow variable set,
   renamed to clean ACSS-style custom properties.
   ============================================================ */

@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- palette --- */
  --white: #fff;
  --white-900: #f2f2f2;
  --white-700: #ced1ce;
  --white-500: #888;
  --ink: #202023;
  --ink-2: #323532;
  --gray-muted: #aba9a9;  /* original Webflow text-muted; quiet UI accents only, too light for body copy */
  --green-dark: #052d24;      /* tartan green */
  --green-forest: #1b452f;    /* everglade */
  --green-bright: #89f777;    /* new green */
  --green-pastel: #daff98;    /* mindaro */
  --neutral-1: #f5f1fc;
  --transparent: transparent;

  /* --- semantic colors --- */
  --color-surface: var(--white);
  --color-surface-2: var(--white-900);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-2);
  --color-accent: var(--green-dark);
  --color-stroke: #fafafa;
  --border-on-dark: #1b452f4d; /* light column rules on dark sections */

  /* --- buttons --- */
  --btn-bg: var(--green-pastel);
  --btn-text: var(--green-dark);
  --btn-hover-bg: var(--green-dark);
  --btn-hover-text: var(--color-surface);
  --btn-secondary-border: #05242426; /* --color-stroke is near-white; a rest-state button needs a visible border */
  --btn-secondary-bg: var(--transparent);
  --btn-secondary-text: var(--color-text);
  --btn-secondary-hover-bg: #0000000d;
  --btn-pad-y: clamp(.5rem, .375rem + .417vw, .75rem);
  --btn-pad-x: clamp(1.25rem, 1.125rem + .417vw, 1.5rem);
  --btn-pad-y-sm: .25rem;
  --btn-pad-x-sm: .75rem;

  /* --- typography --- */
  --font-body: "General Sans", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", Arial, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  /* display sizes are fluid: min = original 479px step, max = original
     desktop value, scaling linearly between 480px and 1440px viewports */
  --h1-size: clamp(3rem, 11.875vw - .5625rem, 10.125rem); --h1-lh: .9;  --h1-ls: -2px;
  --h2-size: clamp(2rem, 6.6667vw, 6rem);                 --h2-lh: .9;  --h2-ls: 0em;
  --h3-size: clamp(1.75rem, 3.75vw + .625rem, 4rem);      --h3-lh: 1.2; --h3-ls: 0em;
  --h4-size: clamp(2rem, .8333vw + 1.75rem, 2.5rem);      --h4-lh: 1.2; --h4-ls: 0em;
  --h5-size: clamp(1.75rem, 1.625rem + .417vw, 2rem);   --h5-lh: 1.2; --h5-ls: 0em;
  --h6-size: clamp(1.5rem, 1.375rem + .417vw, 1.75rem); --h6-lh: 1.2; --h6-ls: 0em;
  --text-xl: clamp(1.125rem, .9375rem + .625vw, 1.5rem);  --text-xl-lh: 1.4;
  --text-lg: clamp(1.125rem, 1.0625rem + .208vw, 1.25rem); --text-lg-lh: 1.4;
  --text-md: clamp(1rem, .9375rem + .208vw, 1.125rem);     --text-md-lh: 1.4;
  --text-sm: clamp(.875rem, .8125rem + .208vw, 1rem);      --text-sm-lh: 1.4;
  --text-xs: .875rem;  --text-xs-lh: 1.2;

  /* --- layout --- */
  /* fluid: min = original 479px value, max = original desktop value,
     scaling linearly between 480px and 1440px viewports (same convention
     as the display type sizes above); no breakpoint overrides needed */
  --section-space: clamp(3rem, .5rem + 8.333vw, 8rem);
  --section-space-sm: clamp(2rem, 1.75rem + .833vw, 2.5rem);
  --section-space-md: clamp(2rem, .5rem + 5vw, 5rem);
  --section-space-lg: clamp(3rem, .75rem + 7.5vw, 7.5rem);
  --container-max: 90rem;
  --container-pad: clamp(1.25rem, 4.583vw - .125rem, 4rem);
  --container-max-10col: 75.625rem;
  --container-max-8col: 61.375rem;
  --container-max-6col: 47rem;

  /* --- radii --- */
  --radius-none: 0px;
  --radius-btn: .25rem;
  --radius-sm: .5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;
  --radius-image: var(--radius-none);
  --radius-cards: var(--radius-md);

  /* --- icons / z --- */
  --icon-sm: 1rem;
  --icon-md: 1.5rem;
  --icon-lg: 2rem;
  --z-other: 997;
  --z-nav: 998;
  --z-modal: 999;
}

/* All spacing and type tokens are fluid clamp() values above; no
   per-breakpoint token overrides. Add new tokens as clamp() too. */