/* ============================================================
   Amanda Idris — Portfolio Typography System
   Derived from the Case Study page (Figma desktop 1920).
   A single, reusable text-sizing guide for the whole portfolio.

   HOW TO USE
   - Load this file AFTER styles.css on any page.
   - Apply a role class to a text element: class="t-h3", "t-body", …
   - Or read the --fs-* / --lh-* / --tracking-* tokens directly in CSS.

   The raw Figma sizes (92, 72, 64, 56, 48, 40, 32, 28, 24, 20, 19,
   18, 16, 15, 14) are rationalised into the 13 steps below. Every
   step is fluid: it scales between a mobile min and the Figma max
   via clamp(), reaching its max around a ~1600px viewport.
   ============================================================ */

:root {
  /* ---- Type family (shared with the rest of the site) ---- */
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Display & headings ---- */
  --fs-display-1: 5rem;     /* 80px  Display 1 · Medium · hero metrics */
  --fs-display-2: 4.375rem; /* 70px  Display 2 · Medium · big stat numbers */
  --fs-h1:      clamp(2.5rem, 1.73rem + 2.4vw, 4rem);      /* 40 → 64  page section */
  --fs-h2:      clamp(2.125rem, 1.45rem + 2.1vw, 3.5rem);  /* 34 → 56  case-study title */
  --fs-h3:      clamp(1.875rem, 1.39rem + 1.5vw, 3rem);    /* 30 → 48  section heading */
  --fs-h4:      clamp(1.625rem, 1.3rem + 1.0vw, 2.5rem);   /* 26 → 40  card / project title */
  --fs-h5:      clamp(1.5rem, 1.31rem + 0.6vw, 2rem);      /* 24 → 32  sub-section heading */
  --fs-h6:      clamp(1.375rem, 1.25rem + 0.39vw, 1.75rem);/* 22 → 28  block / tab title */

  /* ---- Body & UI (fixed sizes) ---- */
  --fs-body-lg:   1.125rem;  /* 18px  Body Large · lead / body */
  --fs-body:      1rem;      /* 16px  Body Normal · default body / nav */
  --fs-body-sm:   0.875rem;  /* 14px  Body small · dense body / captions */
  --fs-body-tiny: 0.6875rem; /* 11px  Body Tiny · meta labels */
  --fs-eyebrow-1: 0.8125rem; /* 13px  Eyebrow 1 · SemiBold · uppercase · +0.07em */
  --fs-eyebrow-2: 0.6875rem; /* 11px  Eyebrow 2 · SemiBold · uppercase · +0.06em */

  /* ---- Line heights ---- */
  --lh-display: 0.98;   /* huge metrics, single line */
  --lh-tight:   1.04;   /* headings */
  --lh-snug:    1.18;   /* sub-headings, tab titles */
  --lh-normal:  1.45;   /* body copy */
  --lh-label:   1.25;   /* labels, eyebrows */

  /* ---- Letter spacing ---- */
  --tracking-display: -0.04em;
  --tracking-heading: -0.03em;
  --tracking-snug:    -0.02em;
  --tracking-body:    -0.01em;
  --tracking-wide:     0.06em;  /* eyebrow 2 / all-caps */
  --tracking-wider:    0.07em;  /* eyebrow 1 */

  /* ---- Weights (Figtree: 300 400 500 600 700) ---- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
}

/* ============================================================
   ROLE CLASSES
   Each sets size + weight + leading + tracking. Override weight
   per-instance with the .fw-* helpers below where the design
   diverges (e.g. a Light body paragraph).
   ============================================================ */
.t-display-1,
.t-display-2,
.t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-tight);
}

.t-display-1 { font-size: var(--fs-display-1); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.t-display-2 { font-size: var(--fs-display-2); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.t-h1      { font-size: var(--fs-h1); letter-spacing: var(--tracking-display); }
.t-h2      { font-size: var(--fs-h2); }
.t-h3      { font-size: var(--fs-h3); }
.t-h4      { font-size: var(--fs-h4); }
.t-h5      { font-size: var(--fs-h5); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); }
.t-h6      { font-size: var(--fs-h6); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: var(--fw-semibold); }

.t-body-lg,
.t-body,
.t-body-sm,
.t-body-tiny,
.t-eyebrow-1,
.t-eyebrow-2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-body);
  line-height: var(--lh-normal);
}

.t-body-lg   { font-size: var(--fs-body-lg); }
.t-body      { font-size: var(--fs-body); }
.t-body-sm   { font-size: var(--fs-body-sm); }
.t-body-tiny { font-size: var(--fs-body-tiny); font-weight: var(--fw-medium); line-height: var(--lh-label); }
.t-eyebrow-1 {
  font-size: var(--fs-eyebrow-1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.t-eyebrow-2 {
  font-size: var(--fs-eyebrow-2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ---- Weight helpers (compose with any role class) ---- */
.fw-light    { font-weight: var(--fw-light); }
.fw-regular  { font-weight: var(--fw-regular); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

/* ============================================================
   MOBILE-OPTIMISED SCALE  (≤760px — the site's mobile breakpoint)
   The desktop scale above is locked; this only retunes phones.
   Token-level overrides, so every .t-* role class inherits them.

   Readability principles applied:
   - Body copy never drops below 16px (Body Normal = 16, Body Large = 18);
     the 11px meta label is bumped to 12px so it stays legible on small screens.
   - Oversized desktop display/headings are stepped down to a phone scale
     (a ~1.18 ratio) so headlines don't eat the viewport or wrap awkwardly.
   - Line-height opens up: body → 1.55 (comfortable measure), and headings
     loosen from 1.04 → 1.14 so multi-line mobile headings aren't cramped.
   - Negative tracking is relaxed at small sizes (tight tracking hurts
     legibility on phones); eyebrow/all-caps tracking is kept.
   ============================================================ */
@media (max-width: 760px) {
  :root {
    /* Display & headings — phone scale */
    --fs-display-1: 3.5rem;   /* 80 → 56px */
    --fs-display-2: 3rem;     /* 70 → 48px */
    --fs-h1: 2.5rem;          /* → 40px */
    --fs-h2: 2rem;            /* → 32px */
    --fs-h3: 1.75rem;         /* → 28px */
    --fs-h4: 1.5rem;          /* → 24px */
    --fs-h5: 1.375rem;        /* → 22px */
    --fs-h6: 1.25rem;         /* → 20px */

    /* Body & UI — kept at readable sizes (≥16px for copy); tiny label bumped */
    --fs-body-lg:   1.125rem; /* 18px */
    --fs-body:      1rem;     /* 16px */
    --fs-body-sm:   0.875rem; /* 14px */
    --fs-body-tiny: 0.75rem;  /* 11 → 12px (legibility) */
    --fs-eyebrow-1: 0.8125rem;/* 13px */
    --fs-eyebrow-2: 0.6875rem;/* 11px */

    /* Line heights — more open for small-screen reading */
    --lh-display: 1.06;
    --lh-tight:   1.14;
    --lh-snug:    1.24;
    --lh-normal:  1.55;
    --lh-label:   1.3;

    /* Letter spacing — relaxed at small sizes */
    --tracking-display: -0.025em;
    --tracking-heading: -0.02em;
    --tracking-snug:    -0.015em;
    --tracking-body:    -0.01em;
  }
}