/**
 * Leaseweb CX Redesign 2.0 — compact design tokens
 * Source: Figma lsw-cx-redesign-2.0 (node 16391:43384)
 * Fonts: local Tiempos Headline + DIN 2014 (assets/fonts)
 */

@font-face {
  font-family: "tiempos";
  src: url("./fonts/tiempos-headline-bold.woff2") format("woff2"),
       url("./fonts/TiemposHeadline-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "tiempos";
  src: url("./fonts/tiempos-headline-bold-italic.woff2") format("woff2"),
       url("./fonts/TiemposHeadline-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "din-2014";
  src: url("./fonts/din-2014_regular.woff2") format("woff2"),
       url("./fonts/din-2014_regular.woff") format("woff"),
       url("./fonts/din-2014_regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "din-2014";
  src: url("./fonts/din-2014_bold.woff2") format("woff2"),
       url("./fonts/din-2014_bold.woff") format("woff"),
       url("./fonts/din-2014_bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color — brand */
  --color-navy: #27348b;
  --color-white: #ffffff;
  --color-alt: #f4f4f4;
  --color-border: #dce1ea;
  --color-muted: #bbc4d5;
  --color-promo: #0084f2;
  --color-cta: #f18700;

  /* Semantic colors */
  --section-bg-default: var(--color-white);
  --section-bg-alt: var(--color-alt);
  --section-bg-inverted: var(--color-navy);
  --section-border: var(--color-border);

  --text-heading: var(--color-navy);
  --text-heading-inverted: var(--color-white);
  --text-body: var(--color-navy);
  --text-link: var(--color-navy);
  --text-promo: var(--color-promo);
  --text-placeholder: var(--color-muted);

  --form-label: var(--color-navy);
  --form-border: var(--color-muted);
  --form-checkbox-border: var(--color-navy);

  --button-bg: var(--color-cta);
  --button-border: var(--color-cta);
  --button-text: var(--color-white);

  --icon-default: var(--color-navy);
  --icon-inverted: var(--color-white);

  /* Typography — families (local) */
  --font-headline: "tiempos", Georgia, "Times New Roman", serif;
  --font-body: "din-2014", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Typography — sizes */
  --font-size-label: 0.875rem; /* 14 */
  --font-size-action: 0.875rem;
  --font-size-body-small: 0.875rem;
  --font-size-body: 1rem; /* 16 */
  --font-size-body-large: 1.25rem; /* 20 */
  --font-size-heading-xl: 2rem; /* 32 */
  --font-size-heading-md: 1.25rem; /* 20 */
  /* Scales only when the longest hero line (switch + “afhankelijk is”) no longer fits */
  --font-size-hero: max(1.25rem, min(5rem, calc((100vw - 48px) / 9.8)));
  --hero-gutter: 24px;

  /* Typography — line heights */
  --line-height-small: 1rem;
  --line-height-default: 1.5rem;
  --line-height-medium: 1.5rem;
  --line-height-large: 1.75rem;
  --line-height-xlarge: 2.25rem;
  --line-height-hero: 1.05;

  /* Typography — letter spacing */
  --tracking-none: 0;
  --tracking-small: 0.0125em;
  --tracking-default: 0.025em;
  --tracking-body-large: 0.04em;
  --tracking-loose: 0.085em;

  /* Typography — weights */
  --weight-regular: 400;
  --weight-bold: 700;

  /* Layout */
  --content-max: 78rem; /* 1248 */
  --content-narrow: 52rem; /* 832 */
  --content-form: 39rem; /* 624 */
  --page-gutter: clamp(1rem, 4vw, 2rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --section-pad-y: clamp(3rem, 6vw, 4rem);
  /* More vertical padding as the viewport (and hero type) gets narrower; min 96px */
  --hero-pad-y: clamp(6rem, calc(9.5rem - 5vw), 7.5rem);

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-switch: cubic-bezier(0.95, 0, 0.05, 1);
  --duration-switch: 2s;
  --duration-mini-switch: 0.7s;
  --duration-mini-exit: 300ms;
  --duration-hero-line: 600ms;
  --delay-mini-switch: 200ms;
  --pause-after-mini: 450ms;
  --stagger-hero-line: 140ms;
  --delay-hero-line-start: calc(
    var(--delay-mini-switch) + var(--duration-mini-switch) + var(--pause-after-mini)
  );
  --delay-hero-switch: calc(
    var(--delay-hero-line-start) + var(--stagger-hero-line) * 2 + var(--duration-hero-line)
  );
}

/* Text styles */
.text-label {
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-small);
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
}

.text-action {
  font-family: var(--font-body);
  font-size: var(--font-size-action);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-small);
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
}

.text-body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-default);
  letter-spacing: var(--tracking-default);
}

.text-body-large {
  font-family: var(--font-body);
  font-size: var(--font-size-body-large);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-large);
  letter-spacing: var(--tracking-body-large);
}

.text-body-small {
  font-family: var(--font-body);
  font-size: var(--font-size-body-small);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-small);
  letter-spacing: var(--tracking-small);
}

.text-body-small-bold {
  font-family: var(--font-body);
  font-size: var(--font-size-body-small);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-small);
  letter-spacing: var(--tracking-small);
}

.text-heading-xl {
  font-family: var(--font-headline);
  font-size: var(--font-size-heading-xl);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-xlarge);
  letter-spacing: var(--tracking-none);
}

.text-heading-md {
  font-family: var(--font-headline);
  font-size: var(--font-size-heading-md);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-medium);
  letter-spacing: var(--tracking-none);
}

.text-hero {
  font-family: var(--font-headline);
  font-size: var(--font-size-hero);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-hero);
  letter-spacing: var(--tracking-none);
}