/*
  Typography. IBM Plex Sans + IBM Plex Mono — deliberately not Inter
  (Development Master Prompt §8). Chosen because IBM Plex was designed
  specifically for technical/engineering communication, ships a genuine
  mono companion in the same family (used here for specs, part numbers and
  navigation labels — literally the "stamped rating-plate" register this
  brand's own products use), and reads as considered rather than a
  training-data default. Self-hosted, latin subset only, for performance
  (Development Master Prompt §21).
*/

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/public/fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/public/fonts/ibm-plex-sans-500.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/public/fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/public/fonts/ibm-plex-sans-700.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/public/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/public/fonts/ibm-plex-mono-600.woff2') format('woff2');
}

:root {
    --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --tracking-wide: 0.02em;
    --tracking-wider: 0.08em;

    /* Type scale */
    --text-xs: 0.75rem;    /* 12px — filenames, fine print */
    --text-sm: 0.875rem;   /* 14px — nav, labels, small */
    --text-base: 1rem;     /* 16px — body */
    --text-md: 1.125rem;   /* 18px — lead paragraphs */
    --text-lg: 1.375rem;   /* 22px — h3 */
    --text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);   /* h2 */
    --text-2xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); /* h1 */
    --text-3xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);  /* hero display */
}

html {
    font-family: var(--font-sans);
    font-size: 100%;
    color: var(--color-text);
}

body {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    font-weight: var(--font-regular);
}

h1, h2, h3, .h1, .h2, .h3 {
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    color: var(--color-text);
}

h1, .h1 { font-size: var(--text-2xl); }
h2, .h2 { font-size: var(--text-xl); }
h3, .h3 { font-size: var(--text-lg); font-weight: var(--font-semibold); }

.display {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    line-height: 1.05;
    letter-spacing: -0.015em;
}

.lead {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

small, .text-small {
    font-size: var(--text-sm);
}

/* The recurring "spec-plate" label: small, tracked-out, uppercase mono —
   used above section headings, on nav, on data labels. Never body copy. */
.mono-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

.text-muted { color: var(--color-text-muted); }
.text-inverse { color: var(--color-text-inverse); }
.text-inverse-muted { color: var(--color-text-inverse-muted); }