/**
 * Nearly Perfect Design System - Typography
 * CSS Custom Properties
 *
 * Font loading (rms-app-extranet vendored copy — TECH-772):
 *   Geist (display/headings) — SELF-HOSTED variable woff2 at /static/fonts/geist-variable.woff2
 *     (source: Google Fonts Geist v5; OFL. No runtime CDN dependency.)
 *   Inter (body) — loaded via Google Fonts <link> in layouts/base.html + layouts/auth.html:
 *     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 */

/* Geist — self-hosted variable font (covers weights 100–900) */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/geist-variable.woff2') format('woff2');
}

:root {
  /* Font Families */
  --font-display: 'Geist', sans-serif;   /* Display & headings — modern, clean, premium */
  --font-heading: 'Geist', sans-serif;   /* Alias for --font-display */
  --font-body: 'Inter', sans-serif;      /* Body & UI text — readable, neutral, functional */

  /* ============================================================
   * TYPE SCALE — Design System Tokens
   * ============================================================ */

  /* Display sizes — use --font-display, light weight */
  --font-size-display-xl: 4rem;       /* 64px — Hero headlines only */
  --font-size-display-l:  3rem;       /* 48px — Section heroes */
  --font-size-display-m:  2.25rem;    /* 36px — Sub-heroes */

  /* Heading sizes — use --font-heading, semibold */
  --font-size-h1: 2rem;       /* 32px */
  --font-size-h2: 1.5rem;     /* 24px */
  --font-size-h3: 1.25rem;    /* 20px */
  --font-size-h4: 1.125rem;   /* 18px */
  --font-size-h5: 1rem;       /* 16px */

  /* Body sizes — use --font-body, regular */
  --font-size-body-l: 1.125rem;  /* 18px — Emphasis body, lead paragraphs */
  --font-size-body-m: 1rem;      /* 16px — Default body */
  --font-size-body-s: 0.875rem;  /* 14px — Supporting text, captions */

  /* Legacy size tokens (kept for backwards compatibility) */
  --font-size-xs:   0.75rem;      /* 12px */
  --font-size-sm:   0.875rem;     /* 14px */
  --font-size-base: 1rem;         /* 16px */
  --font-size-lg:   1.25rem;      /* 20px */
  --font-size-xl:   1.5rem;       /* 24px */
  --font-size-2xl:  2rem;         /* 32px */
  --font-size-3xl:  2.5rem;       /* 40px */
  --font-size-4xl:  3rem;         /* 48px */
  --font-size-5xl:  4rem;         /* 64px */

  /* Font Weights */
  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line Heights */
  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  /* Letter Spacing */
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.02em;
  --letter-spacing-wider:  0.05em;
}

/* ============================================================
 * DISPLAY — Geist, light weight. Large sizes, hero sections.
 * ============================================================ */

.text-display-xl {
  font-family: var(--font-display);
  font-size: var(--font-size-display-xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.text-display-l {
  font-family: var(--font-display);
  font-size: var(--font-size-display-l);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.text-display-m {
  font-family: var(--font-display);
  font-size: var(--font-size-display-m);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
}

/* ============================================================
 * HEADINGS — Geist, semibold
 * ============================================================ */

.text-h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.text-h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.text-h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.text-h4 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.text-h5 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

/* ============================================================
 * BODY — Inter, regular
 * ============================================================ */

.text-body-l {
  font-family: var(--font-body);
  font-size: var(--font-size-body-l);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
}

.text-body-m,
.text-body {
  font-family: var(--font-body);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
}

.text-body-s,
.text-body-sm {
  font-family: var(--font-body);
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.text-caption {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

/* ============================================================
 * BUTTON — Geist, semibold
 * ============================================================ */

.text-button {
  font-family: var(--font-heading);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wide);
}

.text-button-sm {
  font-family: var(--font-heading);
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wide);
}