/* =========================================================================
   TYPOGRAPHY TOKENS
   Priest Group Studios - Semantic Typography System
   ========================================================================= */

:root {
  /* 1. FONT FAMILIES */
  --font-display: "Suisse Intl", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Suisse Intl", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* 2. FONT WEIGHTS */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* 3. LINE HEIGHTS */
  --lh-solid: 1;
  --lh-tight: 1.1;
  --lh-compact: 1.25;
  --lh-body: 1.4;
  --lh-loose: 1.6;

  /* 4. LETTER SPACING (TRACKING) */
  --track-tight: -0.02em;
  --track-none: 0;
  --track-normal: 0.01em;
  --track-caps: 0.08em;
  --track-loose: 0.2em;

  /* 5. TEXT CASES */
  --case-upper: uppercase;
  --case-capitalize: capitalize;
  --case-none: none;

  /* 6. FONT SIZES (Scale: Mobile-First) */
  --fs-micro: 0.65rem;
  --fs-small: 0.85rem;
  --fs-body: 1rem;
  --fs-h5: 1.15rem;
  --fs-h4: 1.25rem;
  --fs-h3: 1.65rem;
  --fs-h2: 1.75rem;
  --fs-h1: 2rem;
  --fs-display: 2.5rem;
  --fs-intro-display: 40px;
  --fs-intro-logo: 26.04px;

  /* 7. SEMANTIC ROLES */
  --type-display: var(--fs-display);
  --type-h1: var(--fs-h1);
  --type-h2: var(--fs-h2);
  --type-h3: var(--fs-h3);
  --type-h4: var(--fs-h4);
  --type-h5: var(--fs-h5);
  --type-lead: var(--fs-h4);
  --type-body: var(--fs-body);
  --type-small: var(--fs-small);
  --type-micro: var(--fs-micro);
  --type-label: var(--fs-small);

  /* Durations */
  --motion-instant: 80ms;
  --motion-fast: 160ms;
  --motion-med: 280ms;
  --motion-slow: 620ms;
  --motion-xslow: 1200ms;
  --motion-frame: 1900ms;
  /* matches your current fade */

  /* Easings */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Distances */
  --motion-y-sm: 8px;
  --motion-y-md: 16px;

  /* Scales */
  --motion-scale-down: 0.92;
  --motion-scale-up: 1.08;

  /* Opacity targets */
  --motion-dim: 0.3;
  --motion-dim-border: 0.26;

  /* Stagger */
  --stagger-step: 100ms;
  --stagger-start: 80ms;
}

/* 8. DESKTOP SCALE */
@media (min-width: 1024px) {
  :root {
    --fs-micro: 0.75rem;
    --fs-small: 0.95rem;
    --fs-body: 1.125rem;
    --fs-h5: 1.25rem;
    --fs-h4: 1.35rem;
    --fs-h3: 1.95rem;
    --fs-h2: 2.25rem;
    --fs-h1: 3rem;
  }
}