/* =============================================================
   Type system — single typeface, strict scale.

   Loads Switzer Variable as ONE family with both upright + italic
   files under font-style: normal/italic. This lets `font-style: italic`
   (and `<em>`) pull from the real italic file instead of synthesizing.

   Exposes:
     • Size/weight/tracking/leading tokens on :root
     • One utility class per scale step (.type-display-xl … .type-mono-meta)
     • Base body type defaults

   Load this file FIRST in every page so downstream stylesheets can
   reference --type-* / --weight-* / --track-* / --leading-* tokens.
   ============================================================= */

/* ── @font-face — single family, full variable axis, real italic ── */
@font-face {
    font-family: 'Switzer';
    src: url('../fonts/Switzer-Variable.ttf') format('truetype-variations'),
         url('./fonts/Switzer-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Switzer';
    src: url('../fonts/Switzer-VariableItalic.ttf') format('truetype-variations'),
         url('./fonts/Switzer-VariableItalic.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Nudica Mono';
    src: url('../fonts/nudicamono-regular-webfont.ttf') format('truetype'),
         url('./fonts/nudicamono-regular-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nudica Mono';
    src: url('../fonts/nudicamono-regularitalic-webfont.ttf') format('truetype'),
         url('./fonts/nudicamono-regularitalic-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    /* font-family stack */
    --font-sans: 'Switzer', system-ui, -apple-system, sans-serif;

    /* ── Sizes (rem, 16px root) ───────────────────────────────── */
    --type-display-xl-size: clamp(4rem, 9vw, 8.5rem);
    --type-display-l-size:  clamp(3rem, 6vw, 5.5rem);
    --type-display-m-size:  clamp(2.25rem, 4vw, 3.5rem);
    --type-h1-size:         2.5rem;
    --type-h2-size:         2rem;
    --type-h3-size:         1.5rem;
    --type-lead-size:       1.375rem;
    --type-body-size:       1rem;
    --type-small-size:      0.875rem;
    --type-caption-size:    0.75rem;
    --type-mono-meta-size:  0.6875rem;

    /* ── Weights — only these four ────────────────────────────── */
    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;

    /* ── Tracking — large = negative, mono-meta = positive ────── */
    --track-display-xl: -0.04em;
    --track-display-l:  -0.035em;
    --track-display-m:  -0.03em;
    --track-h1:         -0.025em;
    --track-h2:         -0.02em;
    --track-h3:         -0.015em;
    --track-lead:       -0.01em;
    --track-body:       -0.005em;
    --track-small:       0;
    --track-caption:     0;
    --track-mono-meta:   0.12em;

    /* ── Leading ──────────────────────────────────────────────── */
    --leading-display-xl: 0.92;
    --leading-display-l:  0.95;
    --leading-display-m:  1.0;
    --leading-h1:         1.05;
    --leading-h2:         1.1;
    --leading-h3:         1.2;
    --leading-lead:       1.4;
    --leading-body:       1.55;
    --leading-small:      1.5;
    --leading-caption:    1.4;
    --leading-mono-meta:  1.4;

    /* ── Max line lengths (per spec) ──────────────────────────── */
    --measure-body:    60ch;
    --measure-lead:    32ch;
    --measure-display: 18ch;
}

/* ── Utility classes — apply a full type bundle in one class ──── */
.type-display-xl,
.type-display-l,
.type-display-m,
.type-h1,
.type-h2,
.type-h3,
.type-lead,
.type-body,
.type-small,
.type-caption,
.type-mono-meta {
    font-family: var(--font-sans);
    font-synthesis-weight: none;
    font-synthesis-style: none;
}

.type-display-xl {
    font-size: var(--type-display-xl-size);
    font-weight: var(--weight-medium);
    font-variation-settings: 'wght' 500;
    letter-spacing: var(--track-display-xl);
    line-height: var(--leading-display-xl);
    max-width: var(--measure-display);
}
.type-display-l {
    font-size: var(--type-display-l-size);
    font-weight: var(--weight-medium);
    font-variation-settings: 'wght' 500;
    letter-spacing: var(--track-display-l);
    line-height: var(--leading-display-l);
    max-width: var(--measure-display);
}
.type-display-m {
    font-size: var(--type-display-m-size);
    font-weight: var(--weight-medium);
    font-variation-settings: 'wght' 500;
    letter-spacing: var(--track-display-m);
    line-height: var(--leading-display-m);
    max-width: var(--measure-display);
}
.type-h1 {
    font-size: var(--type-h1-size);
    font-weight: var(--weight-medium);
    font-variation-settings: 'wght' 500;
    letter-spacing: var(--track-h1);
    line-height: var(--leading-h1);
}
.type-h2 {
    font-size: var(--type-h2-size);
    font-weight: var(--weight-medium);
    font-variation-settings: 'wght' 500;
    letter-spacing: var(--track-h2);
    line-height: var(--leading-h2);
}
.type-h3 {
    font-size: var(--type-h3-size);
    font-weight: var(--weight-medium);
    font-variation-settings: 'wght' 500;
    letter-spacing: var(--track-h3);
    line-height: var(--leading-h3);
}
.type-lead {
    font-size: var(--type-lead-size);
    font-weight: var(--weight-regular);
    font-variation-settings: 'wght' 400;
    letter-spacing: var(--track-lead);
    line-height: var(--leading-lead);
    max-width: var(--measure-lead);
}
.type-body {
    font-size: var(--type-body-size);
    font-weight: var(--weight-regular);
    font-variation-settings: 'wght' 400;
    letter-spacing: var(--track-body);
    line-height: var(--leading-body);
    max-width: var(--measure-body);
}
.type-small {
    font-size: var(--type-small-size);
    font-weight: var(--weight-regular);
    font-variation-settings: 'wght' 400;
    letter-spacing: var(--track-small);
    line-height: var(--leading-small);
}
.type-caption {
    font-size: var(--type-caption-size);
    font-weight: var(--weight-medium);
    font-variation-settings: 'wght' 500;
    letter-spacing: var(--track-caption);
    line-height: var(--leading-caption);
}
.type-mono-meta {
    font-size: var(--type-mono-meta-size);
    font-weight: var(--weight-medium);
    font-variation-settings: 'wght' 500;
    letter-spacing: var(--track-mono-meta);
    line-height: var(--leading-mono-meta);
    text-transform: uppercase;
}

/* ── Base body defaults ───────────────────────────────────────── */
html { font-size: 16px; }
body {
    font-family: var(--font-sans);
    font-size: var(--type-body-size);
    font-weight: var(--weight-regular);
    font-variation-settings: 'wght' 400;
    letter-spacing: var(--track-body);
    line-height: var(--leading-body);
    font-synthesis-weight: none;
    font-synthesis-style: none;
}

/* ── Italic + bold defaults pull from real files ─────────────── */
em, i {
    font-style: italic;
    /* Italic is its own variable axis font under the same family */
}
b, strong {
    font-weight: var(--weight-medium);
    font-variation-settings: 'wght' 500;
}

/* ── Heading defaults — keep markup clean, scale through tag ── */
h1 {
    font-size: var(--type-h1-size);
    font-weight: var(--weight-medium);
    font-variation-settings: 'wght' 500;
    letter-spacing: var(--track-h1);
    line-height: var(--leading-h1);
}
h2 {
    font-size: var(--type-h2-size);
    font-weight: var(--weight-medium);
    font-variation-settings: 'wght' 500;
    letter-spacing: var(--track-h2);
    line-height: var(--leading-h2);
}
h3 {
    font-size: var(--type-h3-size);
    font-weight: var(--weight-medium);
    font-variation-settings: 'wght' 500;
    letter-spacing: var(--track-h3);
    line-height: var(--leading-h3);
}

/* ── Universal overrides ────────────────────────────────────────
   Per direction: all text sits at 0 letter-spacing and 1rem size,
   regardless of prior rules (tokens, utility classes, hardcoded
   values). Sits at the bottom of this file so it wins by load
   order against everything else. */
*,
*::before,
*::after {
    letter-spacing: 0 !important;
    font-size: 1rem !important;
}