@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=Archivo+Black&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Special+Elite&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap");

/* SYMBOLS */
.material-symbols,
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;

  font-variation-settings:
    "opsz" 24,
    "wght" 400,
    "FILL" 0,
    "GRAD" 0;
}


:root {
  --display: "Archivo Black", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Special Elite", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --logo: var(--display);

  --type-root: 1;

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

  --type-line-tight:  calc(1.20 * var(--type-root));
  --type-line-normal: calc(1.45 * var(--type-root));
  --type-line-loose:  calc(1.70 * var(--type-root));

  --weight-regular: 400;
  --weight-medium: 700;

  --track-tight:  calc(-0.02em * var(--type-root));
  --track-normal: 0em;
  --track-wide:   calc( 0.03em * 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: calc(var(--type-scale-base) * 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: calc(var(--type-scale-base) * 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.00), 8vw,  calc(var(--type-scale-base) * 3.00)); line-height: 1.15; }
  h2 { font-size: clamp(calc(var(--type-scale-base) * 1.60), 6.5vw, calc(var(--type-scale-base) * 2.40)); line-height: 1.2; }
  h3 { font-size: clamp(calc(var(--type-scale-base) * 1.35), 5.5vw, calc(var(--type-scale-base) * 2.00)); line-height: 1.25; }
}