/* Dee's Portfolio — Typography tokens
   Headings: Martel (serif, weight 400 default, up to 900 for bold display).
   Body: Inter. Type scale ships desktop sizes; the @media block swaps in the
   smaller mobile scale below the lg (992px) breakpoint. */

:root {
  --font-heading: "Martel", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Relume treats weight 400 as the "bold" heading weight (elegant serif look).
     A heavier 700 is available for display moments. */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Desktop type scale (>= 992px) ---- */
  --text-h1: 5.25rem;   /* 84px */
  --text-h2: 3.75rem;   /* 60px */
  --text-h3: 3rem;      /* 48px */
  --text-h4: 2.5rem;    /* 40px */
  --text-h5: 2rem;      /* 32px */
  --text-h6: 1.625rem;  /* 26px */
  --text-large: 1.625rem;   /* 26px */
  --text-medium: 1.25rem;   /* 20px */
  --text-regular: 1.125rem; /* 18px */
  --text-small: 1rem;       /* 16px */
  --text-tiny: 0.75rem;     /* 12px */

  --leading-heading: 1.2;
  --leading-h1: 1.1;
  --leading-body: 1.6;
  --tracking-heading: 0.01em;
}

/* ---- Mobile type scale (< 992px) ---- */
@media (max-width: 991px) {
  :root {
    --text-h1: 3rem;       /* 48px */
    --text-h2: 2.75rem;    /* 44px */
    --text-h3: 2rem;       /* 32px */
    --text-h4: 1.5rem;     /* 24px */
    --text-h5: 1.25rem;    /* 20px */
    --text-h6: 1.125rem;   /* 18px */
    --text-large: 1.125rem;   /* 18px */
    --text-medium: 1rem;      /* 16px */
    --text-regular: 0.875rem; /* 14px */
    --text-small: 0.75rem;    /* 12px */
    --text-tiny: 0.625rem;    /* 10px */
  }
}