@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap");

:root {
  --display: "Inter", sans-serif;
  --body: "Merriweather", serif;
  --logo: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --type-root: 1;

  --type-scale-base: calc(1rem * var(--type-root));

  --type-line-tight: 1.25;
  --type-line-normal: 1.5;
  --type-line-loose: 1.75;

  --weight-regular: 400;
  --weight-medium: 500;

  --track-tight:  calc(-0.015em * var(--type-root));
  --track-normal: 0em;
  --track-wide:   calc( 0.015em * var(--type-root));
}

/* DISPLAY */
h1 {
  font-family: var(--display);
  font-size: calc(var(--type-scale-base) * 3.5625);
  line-height: calc(var(--type-scale-base) * 4);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-tight);
}

h2 {
  font-family: var(--display);
  font-size: calc(var(--type-scale-base) * 2.8125);
  line-height: calc(var(--type-scale-base) * 3.25);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-normal);
}

h3 {
  font-family: var(--display);
  font-size: calc(var(--type-scale-base) * 2.25);
  line-height: calc(var(--type-scale-base) * 2.75);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-normal);
}

/* HEADLINES */
h4 {
  font-family: var(--display);
  font-size: calc(var(--type-scale-base) * 2);
  line-height: calc(var(--type-scale-base) * 2.5);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-normal);
}

h5 {
  font-family: var(--display);
  font-size: calc(var(--type-scale-base) * 1.75);
  line-height: calc(var(--type-scale-base) * 2.25);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-normal);
}

h6 {
  font-family: var(--display);
  font-size: calc(var(--type-scale-base) * 1.5);
  line-height: calc(var(--type-scale-base) * 2);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-normal);
}

/* TITLES */
.title-large {
  font-family: var(--display);
  font-size: calc(var(--type-scale-base) * 1.375);
  line-height: calc(var(--type-scale-base) * 1.75);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-normal);
}

.title-medium {
  font-family: var(--display);
  font-size: var(--type-scale-base);
  line-height: calc(var(--type-scale-base) * 1.5);
  font-weight: var(--weight-medium);
  letter-spacing: 0.015em;
}

.title-small {
  font-family: var(--display);
  font-size: calc(var(--type-scale-base) * 0.875);
  line-height: calc(var(--type-scale-base) * 1.25);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
}

/* BODY TEXT */
p {
  font-family: var(--body);
  font-size: calc(var(--type-scale-base) * 0.875);
  line-height: var(--type-line-normal);
  font-weight: var(--weight-regular);
  letter-spacing: 0.015em;
}

p.large {
  font-family: var(--body);
  font-size: var(--type-scale-base);
  line-height: var(--type-line-normal);
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
}

small,
.caption {
  font-family: var(--body);
  font-size: calc(var(--type-scale-base) * 0.75);
  line-height: calc(var(--type-scale-base) * 1.333);
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
}

/* BUTTONS */
button,
.btn {
  font-family: var(--body);
  font-size: calc(var(--type-scale-base) * 0.875);
  line-height: calc(var(--type-scale-base) * 1.25);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  text-transform: none;
}

/* LABELS */
.label-medium {
  font-family: var(--body);
  font-size: calc(var(--type-scale-base) * 0.75);
  line-height: calc(var(--type-scale-base) * 1.333);
  font-weight: var(--weight-medium);
  letter-spacing: 0.03em;
}

.label-small {
  font-family: var(--body);
  font-size: calc(var(--type-scale-base) * 0.6875);
  line-height: calc(var(--type-scale-base) * 1.333);
  font-weight: var(--weight-medium);
  letter-spacing: 0.03em;
}


/* Mobile typography: cap display sizes + slightly reduce base scaling */
@media (max-width: 600px) {
  :root { --type-root: 0.94; }

  h1 { font-size: clamp(calc(var(--type-scale-base) * 2), calc(8vw * var(--type-root)), calc(var(--type-scale-base) * 3)); line-height: 1.15; }
  h2 { font-size: clamp(calc(var(--type-scale-base) * 1.6), calc(6.5vw * var(--type-root)), calc(var(--type-scale-base) * 2.4)); line-height: 1.2; }
  h3 { font-size: clamp(calc(var(--type-scale-base) * 1.35), calc(5.5vw * var(--type-root)), calc(var(--type-scale-base) * 2)); line-height: 1.25; }
}