/* Structa design system: variables.css (the Webflow variables, mapped onto roles and tokens).
   Generated by _tools/design-system/generate.mjs from _tools/design-system/maps/structa.mjs (with structa.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/structa-it-creative-agency-template.webflow.css. */
:root,
[data-theme] {
  --color-neutral--shade-50: var(--role-page);
  --fonts--body: var(--font-body);
  --color-base--black: var(--role-ink);
  --fonts--heading: var(--font-heading);
  --accent: var(--role-accent);
  --color-base--white: var(--role-surface);
  --content-width--container: var(--container-width);
  --section-padding--medium: calc(var(--section-padding-medium) * var(--section-spacing));
  --section-padding--large: calc(var(--section-padding-large) * var(--section-spacing));
  --content-width--large: calc(var(--container-width) * 896 / 1200);
  --color-neutral--shade-300: var(--role-line-strong);
  --content-width--medium: calc(var(--container-width) * 654 / 1200);
  --section-padding--small: calc(var(--section-padding-small) * var(--section-spacing));
  --content-width--x-large: calc(var(--container-width) * 1138 / 1200);
  --fonts--badge: var(--font-label);
  --color-neutral--shade-200: var(--role-line);
  --content-width--small: calc(var(--container-width) * 480 / 1200);
  --color-neutral--shade-900: var(--role-ink-soft);
  --color-neutral--shade-100: var(--role-surface-2);
  --color-neutral--shade-400: var(--role-line-dark);
  --color-neutral--shade-500: var(--tone-line-dark-87-ink-soft);
  --color-neutral--shade-600: var(--tone-line-dark-79-ink-soft);
  --color-neutral--shade-700: var(--tone-line-dark-67-ink-soft);
  --color-neutral--shade-800: var(--tone-ink-soft-56-line-dark);
  --radius--default: var(--radius-card);
  --radius--button: var(--radius-button);
}