/* Canopis design system: variables.css (the Webflow variables, mapped onto roles and tokens).
   Generated by _tools/design-system/generate.mjs from _tools/design-system/maps/canopis.mjs (with canopis.auto.json). Edit the source, then run it again. */
/* Webflow's own variables keep working: each one reads a role or token.
   The Webflow :root and body variable blocks were moved here from public/css/canopis-climate-tech.webflow.css. */
:root,
[data-theme] {
  --color--base--white: var(--role-page);
  --fonts--body: var(--font-body);
  --color--base--black: var(--role-ink);
  --fonts-weights--normal: 400;
  --fonts--heading: var(--font-heading);
  --fonts-weights--semi-bold: 600;
  --fonts-weights--medium: 500;
  --color--accent--primary: var(--role-accent);
  --section-padding--medium: calc(var(--section-padding-medium) * var(--section-spacing));
  --color--neutral--shade-100: var(--role-surface-2);
  --color--neutral--shade-200: var(--role-line);
  --fonts--badge: var(--font-label);
  --color--neutral--shade-50: var(--role-surface);
  --fonts-weights--light: 300;
  --content-width--container: var(--container-width);
  --color--accent--deep: var(--role-accent-deep);
  --color--neutral--shade-300: var(--role-line-strong);
  --color--accent--soft: var(--role-accent-soft);
  --color--neutral--shade-400: var(--role-line-dark);
  --color--neutral--shade-900: var(--role-ink-2);
  --color--neutral--shade-800: var(--role-ink-soft);
  --color--neutral--shade-600: var(--role-ink-faint);
  --color--neutral--shade-700: var(--role-ink-muted);
  --color--accent--sand: var(--role-sand);
  --color--feedback--error: var(--role-error);
  --content-width--large: calc(var(--container-width) * 896 / 1380);
  --content-width--small: calc(var(--container-width) * 480 / 1380);
  --section-padding--small: calc(var(--section-padding-small) * var(--section-spacing));
  --color--neutral--shade-500: var(--tone-ink-faint-66-line-strong);
  --content-width--x-large: calc(var(--container-width) * 1138 / 1380);
  --content-width--medium: calc(var(--container-width) * 654 / 1380);
  --section-padding--large: calc(var(--section-padding-large) * var(--section-spacing));
  --fonts-weights--thin: 100;
  --fonts-weights--extra-light: 200;
  --fonts-weights--bold: 700;
  --fonts-weights--extra-bold: 800;
  --fonts-weights--back: 900;
  --radius--default: var(--radius-card);
  --radius--button: var(--radius-button);
  --font-size--body-medium: calc(var(--size-body-medium) * var(--scale-body));
  --line-height--body-medium: var(--leading-body-medium);
  --font-size--h1: calc(var(--size-h1) * var(--scale-headings));
  --line-height--h1: var(--leading-h1);
  --font-size--h2: calc(var(--size-h2) * var(--scale-headings));
  --line-height--h2: var(--leading-h2);
  --font-size--h3: calc(var(--size-h3) * var(--scale-headings));
  --line-height--h3: var(--leading-h3);
  --font-size--h4: calc(var(--size-h4) * var(--scale-headings));
  --line-height--h4: var(--leading-h4);
  --font-size--h5: calc(var(--size-h5) * var(--scale-headings));
  --line-height--h5: var(--leading-h5);
  --font-size--h6: calc(var(--size-h6) * var(--scale-headings));
  --line-height--h6: var(--leading-h6);
  --font-size--body-large: calc(var(--size-body-large) * var(--scale-body));
  --line-height--body-large: var(--leading-body-large);
  --font-size--badge: calc(var(--size-badge) * var(--scale-labels));
  --line-height--badge: var(--leading-badge);
  --font-size--button-normal: calc(var(--size-button-normal) * var(--scale-labels));
  --line-height--button-normal: var(--leading-button-normal);
  --font-size--body-small: calc(var(--size-body-small) * var(--scale-body));
  --line-height--body-small: var(--leading-body-small);
  --font-size--body-tiny: calc(var(--size-body-tiny) * var(--scale-body));
  --font-size--button-small: calc(var(--size-button-small) * var(--scale-labels));
  --font-size--display: calc(var(--size-display) * var(--scale-headings));
  --line-height--body-tiny: var(--leading-body-tiny);
  --line-height--button-small: var(--leading-button-small);
  --line-height--display: var(--leading-display);
}