/* =========================================
   Typography - Font Declarations & Tokens
   ========================================= */

/* ---- Custom Font Declarations ---- */
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-Medium.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Font Family Variables ---- */
:root {
  --font-sans: 'Avenir Next', system-ui, sans-serif;
  --font-mono: 'Geist Mono', monospace;
}

/* ---- Base Reset ---- */
body {
  font-family: var(--font-sans);
}

/* =========================================
   Typographic Tokens
   ========================================= */

/* ---- Display ---- */
.display-01 {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.display-02 {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ---- Headers ---- */
.header-01 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.header-02 {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.header-03 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

/* ---- Body ---- */
.body-01 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.body-02 {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

/* ---- Caption ---- */
.caption-01 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
}

/* ---- Label ---- */
.label-01 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ---- Meta ---- */
.meta-01 {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1.4;
}

/* ---- Code ---- */
.code-01 {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.code-02 {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

.code-03 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
}