/* Figma typography tokens and utilities.
   Desktop source: figma node 43:2395.
   Mobile source link node 43:2555 exposes the mobile typography title; responsive
   values below keep the same family/weight system with mobile-safe sizes.
*/

:root {
  --ds-font-headline: "Lay Grotesk - Trial", "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-headline-bold: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-display-serif: "Flecha Test S", "Playfair Display", Georgia, serif;
  --ds-font-body: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-label: "Open Sans", "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-system-title: "Poppins", "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ds-font-light: 300;
  --ds-font-regular: 400;
  --ds-font-medium: 500;
  --ds-font-semi-bold: 600;
  --ds-font-bold: 700;

  --ds-line-height-headline: 1.3;
  --ds-line-height-body: 1.3;
  --ds-line-height-label: 1;
  --ds-letter-spacing: 0;

  --ds-type-display-100: 100px;
  --ds-type-headline-72: 72px;
  --ds-type-headline-64: 64px;
  --ds-type-headline-56: 56px;
  --ds-type-headline-48: 48px;
  --ds-type-headline-40: 40px;
  --ds-type-headline-32: 32px;
  --ds-type-headline-24: 24px;

  --ds-type-body-default: 18px;
  --ds-type-body-small: 16px;
  --ds-type-body-14: 14px;

  --ds-type-label-default: 12px;
  --ds-type-label-small: 10px;

  --ds-type-mobile-title: 70px;

  /* Project compatibility aliases. */
  --font-sans: var(--ds-font-body);
  --font-serif: var(--ds-font-display-serif);
  --font-label: var(--ds-font-label);
  --font-heading-sans: var(--ds-font-headline);
}

@media (max-width: 767px) {
  :root {
    --ds-type-display-100: 64px;
    --ds-type-headline-72: 56px;
    --ds-type-headline-64: 48px;
    --ds-type-headline-56: 40px;
    --ds-type-headline-48: 36px;
    --ds-type-headline-40: 32px;
    --ds-type-headline-32: 28px;
    --ds-type-headline-24: 24px;
    --ds-type-mobile-title: 32px;
  }
}

.ds-display-100,
.ds-headline-72,
.ds-headline-64,
.ds-headline-56,
.ds-headline-48,
.ds-headline-40,
.ds-headline-32,
.ds-headline-24 {
  font-family: var(--ds-font-headline);
  font-weight: var(--ds-font-regular);
  letter-spacing: var(--ds-letter-spacing);
  line-height: var(--ds-line-height-headline);
}

.ds-display-100 { font-size: var(--ds-type-display-100); }
.ds-headline-72 { font-size: var(--ds-type-headline-72); }
.ds-headline-64 { font-size: var(--ds-type-headline-64); }
.ds-headline-56 { font-size: var(--ds-type-headline-56); }
.ds-headline-48 { font-size: var(--ds-type-headline-48); }
.ds-headline-40 { font-size: var(--ds-type-headline-40); }
.ds-headline-32 { font-size: var(--ds-type-headline-32); }
.ds-headline-24 { font-size: var(--ds-type-headline-24); }

.ds-headline-light { font-weight: var(--ds-font-light); }
.ds-headline-regular { font-weight: var(--ds-font-regular); }
.ds-headline-medium { font-weight: var(--ds-font-medium); }
.ds-headline-semi-bold { font-weight: var(--ds-font-semi-bold); }

.ds-headline-bold,
.ds-display-bold {
  font-family: var(--ds-font-headline-bold);
  font-weight: var(--ds-font-bold);
}

.ds-body-default,
.ds-body-small,
.ds-body-14 {
  font-family: var(--ds-font-body);
  letter-spacing: var(--ds-letter-spacing);
  line-height: var(--ds-line-height-body);
}

.ds-body-default { font-size: var(--ds-type-body-default); }
.ds-body-small { font-size: var(--ds-type-body-small); }
.ds-body-14 { font-size: var(--ds-type-body-14); }

.ds-body-light { font-weight: var(--ds-font-light); }
.ds-body-regular { font-weight: var(--ds-font-regular); }
.ds-body-medium { font-weight: var(--ds-font-medium); }
.ds-body-semi-bold { font-weight: var(--ds-font-semi-bold); }
.ds-body-bold { font-weight: var(--ds-font-bold); }

.ds-label-default,
.ds-label-small {
  font-family: var(--ds-font-label);
  letter-spacing: var(--ds-letter-spacing);
  line-height: var(--ds-line-height-label);
}

.ds-label-default { font-size: var(--ds-type-label-default); }
.ds-label-small { font-size: var(--ds-type-label-small); }

.ds-label-uppercase { text-transform: uppercase; }
.ds-label-light { font-weight: var(--ds-font-light); }
.ds-label-regular { font-weight: var(--ds-font-regular); }
.ds-label-medium { font-weight: var(--ds-font-medium); }
.ds-label-semi-bold { font-weight: var(--ds-font-semi-bold); }
.ds-label-bold { font-weight: var(--ds-font-bold); }

.ds-typography-system-title {
  font-family: var(--ds-font-system-title);
  font-size: var(--ds-type-mobile-title);
  font-weight: var(--ds-font-medium);
  letter-spacing: var(--ds-letter-spacing);
  line-height: 1.2;
}