/* Typography.
   Two families, exactly as the source file uses them:
     N27       — display headline (Bold 128px) and every swatch spec label (Medium 24px). NOT SUPPLIED
                 — falls through to Brockmann, then the platform grotesque, until files are uploaded.
     Brockmann — running copy and section labels (Regular / Medium / SemiBold 20px)
   Every text node in the file is line-height 100% and letter-spacing -0.010em. Sizes marked
   (source) are literal; the rest are derived to fill out a usable UI scale. */
:root{
  --font-display:"N27","Brockmann",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"Brockmann",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --tracking-tight:-0.010em;   /* source: used on every text node */
  --tracking-normal:0em;

  --leading-flat:1;            /* source: reported as 100% */
  --leading-auto:1.2;          /* source: how Figma auto-leading actually renders — use this for real copy */
  --leading-snug:1.15;
  --leading-body:1.45;

  /* Size scale */
  --size-12:12px;
  --size-14:14px;
  --size-16:16px;
  --size-18:18px;
  --size-20:20px;   /* source — body copy + section labels */
  --size-24:24px;   /* source — swatch spec labels */
  --size-32:32px;
  --size-40:40px;
  --size-56:56px;
  --size-80:80px;
  --size-128:128px; /* source — page display headline */

  /* Roles */
  --type-display-font:var(--font-display);
  --type-display-size:var(--size-128);
  --type-display-weight:var(--weight-bold);
  --type-display-leading:var(--leading-flat);

  --type-headline-font:var(--font-display);
  --type-headline-size:var(--size-56);
  --type-headline-weight:var(--weight-medium);

  --type-title-font:var(--font-display);
  --type-title-size:var(--size-32);
  --type-title-weight:var(--weight-medium);

  --type-spec-font:var(--font-display);
  --type-spec-size:var(--size-24);
  --type-spec-weight:var(--weight-medium);

  --type-body-font:var(--font-body);
  --type-body-size:var(--size-20);
  --type-body-weight:var(--weight-regular);
  --type-body-leading:var(--leading-body);

  --type-body-sm-font:var(--font-body);
  --type-body-sm-size:var(--size-16);

  --type-label-font:var(--font-body);
  --type-label-size:var(--size-20);
  --type-label-weight:var(--weight-medium);

  --type-label-strong-weight:var(--weight-semibold);

  --type-caption-font:var(--font-body);
  --type-caption-size:var(--size-14);
  --type-caption-weight:var(--weight-medium);
}

/* Utility classes (optional; tokens above are the contract) */
.ap-display{font-family:var(--type-display-font);font-size:var(--type-display-size);font-weight:var(--type-display-weight);line-height:var(--leading-flat);letter-spacing:var(--tracking-tight)}
.ap-headline{font-family:var(--type-headline-font);font-size:var(--type-headline-size);font-weight:var(--type-headline-weight);line-height:var(--leading-flat);letter-spacing:var(--tracking-tight)}
.ap-title{font-family:var(--type-title-font);font-size:var(--type-title-size);font-weight:var(--type-title-weight);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}
.ap-spec{font-family:var(--type-spec-font);font-size:var(--type-spec-size);font-weight:var(--type-spec-weight);line-height:var(--leading-flat);letter-spacing:var(--tracking-tight)}
.ap-body{font-family:var(--type-body-font);font-size:var(--type-body-size);font-weight:var(--type-body-weight);line-height:var(--leading-body);letter-spacing:var(--tracking-tight)}
.ap-label{font-family:var(--type-label-font);font-size:var(--type-label-size);font-weight:var(--type-label-weight);line-height:var(--leading-flat);letter-spacing:var(--tracking-tight)}
.ap-caption{font-family:var(--type-caption-font);font-size:var(--type-caption-size);font-weight:var(--type-caption-weight);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}