/* ============================================
   PHNX — DESIGN TOKENS
   Claude Code: use ONLY these values.
   Never invent a size, spacing, or colour.
   If a value you need isn't here, use the
   nearest one that is.
   ============================================ */

:root {

  /* ---- COLOUR ------------------------------
     Three colours. No tints, no shades,
     no opacity variants except where listed. */

  --paper:      #F4F0E8;
  --ink:        #14181A;
  --red:        #C1352B;

  --ink-60:     rgba(20, 24, 26, 0.60);  /* secondary text only */
  --ink-12:     rgba(20, 24, 26, 0.12);  /* hairlines only */


  /* ---- TYPE SCALE --------------------------
     Base 17px, ratio 1.333 (perfect fourth).
     Fluid between 375px and 1280px viewport.
     Every size on the site is one of these. */

  --t-xs:   clamp(0.688rem, 0.66rem + 0.12vw, 0.75rem);    /* 11–12  labels */
  --t-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.938rem);   /* 14–15  captions */
  --t-base: clamp(1.063rem, 1.02rem + 0.19vw, 1.125rem);   /* 17–18  body */
  --t-md:   clamp(1.375rem, 1.28rem + 0.41vw, 1.625rem);   /* 22–26 */
  --t-lg:   clamp(1.625rem, 1.42rem + 0.87vw, 2.125rem);   /* 26–34  H2 */
  --t-xl:   clamp(2.125rem, 1.70rem + 1.81vw, 3.25rem);    /* 34–52 */
  --t-2xl:  clamp(2.75rem, 1.55rem + 5.12vw, 4.75rem);     /* 44–76  H1 */


  /* ---- OPTICAL TRACKING --------------------
     Tighter as type gets larger. This is the
     single most-missed detail in amateur work. */

  --track-display: -0.025em;   /* --t-2xl, --t-xl */
  --track-head:    -0.015em;   /* --t-lg, --t-md  */
  --track-body:     0;         /* --t-base        */
  --track-label:    0.16em;    /* --t-xs uppercase */


  /* ---- LINE HEIGHT -------------------------
     Inverse to size. Never use 1.5 on a headline. */

  --lh-display: 0.95;
  --lh-head:    1.15;
  --lh-body:    1.55;
  --lh-tight:   1.35;


  /* ---- SPACING -----------------------------
     8px scale. Nothing in between. Ever. */

  --s-1:   8px;
  --s-2:   16px;
  --s-3:   24px;
  --s-4:   32px;
  --s-6:   48px;
  --s-8:   64px;
  --s-12:  96px;
  --s-16: 128px;


  /* ---- LAYOUT ------------------------------ */

  --measure:     65ch;    /* max line length for body text */
  --container:   620px;   /* max content width */
  --container-w: 1120px;  /* max width for full-bleed sections */

  --section-y:   clamp(4.5rem, 3rem + 6vw, 7.5rem);  /* 72–120px */
  --gutter:      clamp(1.25rem, 1rem + 1vw, 1.5rem); /* 20–24px */


  /* ---- BORDER ------------------------------ */

  --radius:  2px;   /* buttons only. Nothing else is rounded. */
  --hair:    1px;


  /* ---- MOTION ------------------------------
     Colour transitions only. No transforms,
     no scroll animation, no reveals. */

  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 160ms;
}


/* ============================================
   APPLIED — the only text styles that exist
   ============================================ */

.h1 {
  font-family: 'Anton', Impact, sans-serif;
  font-size: var(--t-2xl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.h2 {
  font-family: 'Anton', Impact, sans-serif;
  font-size: var(--t-lg);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
}

.body {
  font-size: var(--t-base);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  max-width: var(--measure);
}

.label {
  font-size: var(--t-xs);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 700;
}

.num {
  font-family: 'Anton', Impact, sans-serif;
  font-size: var(--t-md);
  line-height: 1;
  letter-spacing: var(--track-head);
  color: var(--red);
}


/* ============================================
   RULES FOR CLAUDE CODE
   ============================================

   1. Every font-size is a --t-* token.
   2. Every margin, padding and gap is an --s-* token.
   3. Every colour is one of five tokens.
   4. Letter-spacing must match the size band.
      Display sizes are ALWAYS negatively tracked.
   5. Line-height is inverse to size. A headline
      never gets 1.5.
   6. Body text never exceeds --measure.
   7. --red appears exactly three times per page.
   8. No shadows, gradients, transforms, or
      scroll-triggered anything.
   9. Radius is 2px on buttons and 0 everywhere else.
   10. If you need a value not in this file, you
       are doing something the design doesn't do.
       Use the nearest token instead.

   ============================================ */