/* elements_variables.css */

@layer colors, addons, components, other;

:root {
  --fontfamily-modern: "Figtree";
  --fontfamily-traditional: "PT Serif";

  --fontsize-xs: 0.68em;
  --fontsize-sm: 0.78em;
  --fontsize-md: 0.96em;
  --fontsize-base: 0.98em;
  --fontsize-lg: 1.06em;
  --fontsize-xl: 1.08em;
  --fontsize-xxl: 1.18em;
  --fontsize-3xl: 1.4em;
  --fontsize-fluid-sm: clamp(1.05em, 3vw, 1.8em);
  --fontsize-fluid-md: clamp(1.16em, 2.7vw, 1.75em);
  --fontsize-fluid-lg: clamp(1.24em, 2.6vw, 1.82em);
  --fontsize-fluid-xl: clamp(1.45em, 3.5vw, 2.5em);
  --fontsize-fluid-hero: clamp(1.8em, 5vw, 4em);
  --fontsize-fluid-title: clamp(2.4em, 7vw, 5.6em);
  --fontsize-fluid-display: clamp(2.5em, 8.6vw, 5.4em);

  --lineheight-2xs: 0.78;
  --lineheight-xs: 0.88;
  --lineheight-sm: 0.94;
  --lineheight-tight: 1;
  --lineheight-snug: 1.1;
  --lineheight-compact: 1.18;
  --lineheight-short: 1.2;
  --lineheight-medium: 1.24;
  --lineheight-relaxed: 1.3;
  --lineheight-base: 1.35;
  --lineheight-link: 1.4;
  --lineheight-loose: 1.45;
  --lineheight-reading: 1.52;
  --lineheight-roomy: 1.58;
  --lineheight-detail: 1.62;
  --lineheight-body: 1.64;

  --letterspacing-tightest: -0.06em;
  --letterspacing-tighter: -0.04em;
  --letterspacing-tight: -0.03em;
  --letterspacing-medium: -0.02em;
  --letterspacing-soft: -0.01em;
  --letterspacing-none: 0;
  --letterspacing-caps: 0.08em;

  --fontweight-regular: 400;
  --fontweight-medium: 500;
  --fontweight-semibold: 600;
  --fontweight-bold: 700;
  --fontweight-heavy: 800;

  --width-xs: 16em;
  --width-sm: 17em;
  --width-md: 20em;
  --width-lg: 26em;
  --width-xl: 30em;
  --width-xxl: 34em;
  --width-max: 46em;

  --space-2xs: 0.08em;
  --space-xs: 0.18em;
  --space-sm: 0.38em;
  --space-md: 0.55em;
  --space-lg: 0.8em;
  --space-xl: 1em;
  --space-2xl: 1.15em;
  --space-3xl: 1.35em;
  --space-4xl: 2em;

  --padding-xs: 0.5em;
  --padding-sm: 0.78em;
  --padding-md: 1em;
  --padding-lg: 1.15em;
  --padding-xl: 2.4em;
  --padding-xxl: 4em;
  --padding-slide: calc(1em + 6vw);
  --padding-fluid-l: clamp(0.8em, 3vw, 1.4em);
  --padding-fluid-xl: clamp(1em, 4vw, 6em);
  --padding-fluid-xxl: clamp(1.2em, 6vw, 10em);
  --padding-fluid-3xl: clamp(1.8em, 10vw, 16em);

  --focus-padding-compact: var(--padding-sm);
  --focus-padding-standard: var(--padding-md);
  --focus-padding-roomy: var(--padding-lg);

  --line-thin: 1px;
  --line-bold: 2px;

  --radius-xs: 0.25em;
  --radius-sm: 0.5em;
  --radius-round: 999px;

  --size-flag-sm: 2.875em;

  --color-white: #fff;
  --color-black: #000;
  --color-transparent: transparent;

  --color-default-extralight: #eeeeee;
  --color-default-light: #b8b8b8;
  --color-default-colorful: #767676;
  --color-default-regular: #555555;
  --color-default-dark: #333333;
  --color-default-extradark: #191919;

  --child-spacing-x: 0;
  --child-spacing-y: 0;
  --child-padding-x: 0;
  --child-padding-y: 0;
}

.slide {
  --color-extralight: var(--tmp-color1, var(--color-default-extralight));
  --color-light: var(--tmp-color2, var(--color-default-light));
  --color-colorful: var(--tmp-color3, var(--color-default-colorful));
  --color-regular: var(--tmp-color4, var(--color-default-regular));
  --color-dark: var(--tmp-color5, var(--color-default-dark));
  --color-extradark: var(--tmp-color6, var(--color-default-extradark));
}