/*
@magma-design-system/design-tokens v{{ version }}
Generated by Style Dictionary
Do not edit directly
Generated at {{ date }}
*/

:root {
{{!-- font family --}}
{{#each properties as | fonts |}}
  {{#each fonts as | groups |}}
    {{#if groups.fontFamily.value }}
  --font-{{@key}}: {{#each groups.fontFamily.value}} {{ safeString this }}{{#unless @last}},{{/unless}}{{/each}};
    {{/if}}
  {{/each}}
{{/each}}

{{!-- fontsize --}}
{{#each properties as | fonts |}}
  {{#each fonts as | groups |}}
    {{#each groups.variants as | variants |}}
  --text-size-{{@../key}}-{{@key}}: {{#tailwindFontSize 'fontSize' variants.fontSize.value}}{{/tailwindFontSize}};
      {{#each variants as | rules |}}
        {{#ifTailwindFontSizeProp @key}}
  --text-size-{{@../../key}}-{{@../key}}--{{#kebabCase}}{{@key}}{{/kebabCase}}: {{#tailwindFontSize @key rules.value}}{{/tailwindFontSize}};
        {{/ifTailwindFontSizeProp}}
      {{/each}}
    {{/each}}
  {{/each}}
{{/each}}

{{!-- leading --}}
{{#each properties as | property |}}
  {{#each property.leading as | leading |}}
  --leading-{{@key}}: {{#pixelToRem}}{{leading.value}}{{/pixelToRem}};
  {{/each}}
{{/each}}

{{!-- spacing --}}
  --spacing: {{properties.spacing-scale.value}};
{{#each properties.spacing as | spacing |}}
  --spacing-{{@key}}: {{spacing.value}};
{{/each}}

{{!-- container with --}}
{{#each properties.container as | container |}}
  --container-{{@key}}: {{container.value}};
{{/each}}

{{!-- screens breakpoint --}}
{{#each properties.screen as | screen |}}
  --breakpoint-{{@key}}: {{screen.min.value}};
{{/each}}

{{!-- aspet ration --}}
{{#each properties.sizing.aspectRatio as | ratio |}}
  --aspect-{{@key}}: {{ratio.value}};
{{/each}}

{{!-- timing function --}}
{{#each properties.css.timingFunction as | timing |}}
  --ease-{{@key}}: {{timing.value}};
{{/each}}

{{!-- duration --}}
{{#each properties.css.duration as | duration |}}
  --duration-{{@key}}: {{duration.value}};
{{/each}}

{{!-- border --}}
{{#each properties.cosmetic.border as | border |}}
  {{#ifTailwind4Border @key}}
  --border-{{@key}}: {{border.value}};
  {{/ifTailwind4Border}}
{{/each}}

{{!-- radius --}}
{{#each properties.radius as | radius |}}
  {{#ifTailwind4Border @key}}
  --radius-{{@key}}: {{radius.value}};
  {{/ifTailwind4Border}}
{{/each}}

{{!-- box shadow --}}
{{#each properties.cosmetic.boxShadow as | shadow |}}
  --shadow-{{@key}}: {{shadow.value}};
{{/each}}
}