/* ============================================================
   Niu Creative — Typography tokens
   Typeface: Satoshi (geometric grotesque) for everything structural.
   Instrument Serif (italic only) is the accent word-drop device.
   Editorial, confident, restrained — display weight is Bold 700, not Black.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans: "Satoshi", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Satoshi", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* The accent word-drop — ALWAYS italic, never upright, one phrase per headline */
  --font-accent: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* ---- Type scale — editorial display ladder (ref: 88/72/48/32) ---- */
  --text-2xs: 11px;
  --text-xs:  12px;   /* eyebrow */
  --text-sm:  13px;   /* caption / meta */
  --text-ui:  15px;   /* button, footer link, caption-card body */
  --text-base: 18px;  /* default body */
  --text-md:  19px;   /* body-lg */
  --text-lg:  20px;   /* subhead / lead */
  --text-xl:  24px;   /* card title */
  --text-2xl: 32px;   /* headline */
  --text-3xl: 48px;   /* display-md */
  --text-4xl: 72px;   /* display-lg */
  --text-5xl: 88px;   /* display-xl */

  /* ---- Line heights ---- */
  --leading-display: 1.02;  /* display-xl              */
  --leading-tight: 1.05;    /* display-lg              */
  --leading-snug: 1.12;     /* display-md / headline   */
  --leading-title: 1.25;    /* card title              */
  --leading-normal: 1.5;    /* body                    */
  --leading-relaxed: 1.5;   /* long-form               */

  /* ---- Letter spacing — negative only at the largest sizes ---- */
  --tracking-display: -1.5px; /* display-xl            */
  --tracking-lg: -1.2px;      /* display-lg            */
  --tracking-md: -0.6px;      /* display-md            */
  --tracking-headline: -0.3px;/* headline              */
  --tracking-title: -0.2px;   /* card title            */
  --tracking-normal: 0;       /* body — sits at zero   */
  --tracking-eyebrow: 1.2px;  /* the one positive track */

  /* ---- Semantic roles ---- */
  --display-font: var(--font-display);
  --display-weight: var(--weight-bold);   /* 700, not 900 — editorial, not heavy */
  /* Two display registers (Shopify-structure): cinematic marketing uses a
     THIN cut (Satoshi Light 300) for giant quiet headlines; transactional
     UI keeps the editorial Bold. */
  --display-weight-cinematic: var(--weight-light);   /* 300 — thin, airy, large */
  --display-weight-transactional: var(--weight-bold);/* 700 — editorial */

  --heading-weight: var(--weight-bold);
  --heading-tracking: var(--tracking-headline);

  --body-weight: var(--weight-regular);
  --body-leading: var(--leading-normal);

  --eyebrow-weight: var(--weight-bold);
  --eyebrow-tracking: var(--tracking-eyebrow);
  --eyebrow-size: var(--text-xs);
}