/* ===========================================
   Y2K DESIGN SYSTEM — TYPOGRAPHY TOKENS
   Stack: Monospace (functional) + Display (chaos)
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Space+Grotesk:wght@300;400;500;700&display=swap');

:root {
  /* --- Font Families --- */
  --font-functional: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-chaos: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;

  /* --- Scale (modular, ratio 1.25) --- */
  --text-xs: 0.64rem;    /* 10.24px */
  --text-sm: 0.8rem;     /* 12.8px */
  --text-base: 1rem;     /* 16px */
  --text-md: 1.25rem;    /* 20px */
  --text-lg: 1.563rem;   /* 25px */
  --text-xl: 1.953rem;   /* 31.25px */
  --text-2xl: 2.441rem;  /* 39px */
  --text-3xl: 3.052rem;  /* 48.8px */
  --text-4xl: 3.815rem;  /* 61px */
  --text-hero: 5rem;     /* 80px — decorative only */

  /* --- Line Heights --- */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* --- Letter Spacing --- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-chaos: 0.15em; /* decorative layer */

  /* --- Font Weights --- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}

/* --- Base Reset --- */
body {
  font-family: var(--font-functional);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Functional Headings --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* --- Decorative Text (chaos layer) --- */
.chaos-text {
  font-family: var(--font-chaos);
  letter-spacing: var(--tracking-chaos);
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}

/* --- Code / Technical --- */
code, pre, .mono {
  font-family: var(--font-functional);
  font-size: var(--text-sm);
}