/* ============================================
   ABLAZE DESIGN TOKENS
   Single source of truth for colour + type.
   Loaded by every page INCLUDING links.html, which
   is otherwise a standalone linktree. Change a value
   here and it reaches the whole site at once.
   ============================================ */

@font-face {
  font-family: 'Ablaze';
  src: url('assets/font/AblazeFont.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Type families. Every font-family in this file points at one of these,
     so swapping a typeface is a one-line change here, not a sweep. */
  --font-display:'Anton',sans-serif;        /* h1/h2 and the big display tier */
  --font-main:'Archivo',sans-serif;           /* body, UI, buttons, forms */
  --font-label:'Bebas Neue',sans-serif;     /* eyebrows, kickers, micro-labels */
  --font-accent:'Playfair Display',serif;   /* italic accents, prices, quotes */
  --font-brand:'Ablaze','Anton',sans-serif; /* the fire word only */

  /* Type scale. Replaces 46 hand-picked sizes. Every text-bearing rule maps
     to one of these; icon glyphs and the .plw-* faux logos stay bespoke.
     Display steps (h1-h3) are tuned to Anton's condensed metrics and will
     need re-measuring if the display face changes. */
  --t-micro:11px;                    /* years, roles, tags, sub-labels */
  --t-label:13px;                    /* eyebrows, kickers, badges */
  --t-ui:14px;                       /* buttons, fields, table cells, nav */
  --t-body:clamp(15px,.875rem + .2vw,17px);   /* prose */
  --t-lead:clamp(17px,1rem + .35vw,21px);     /* ledes, pull copy */
  --t-h6:clamp(17px,.95rem + .3vw,21px);      /* smallest titles */
  --t-h5:clamp(20px,1rem + .45vw,24px);       /* card titles */
  --t-h4:clamp(24px,1.2rem + .6vw,32px);      /* large card + rail heads */
  --t-h3:clamp(44px,6.5vw,104px);    /* section display */
  --t-h2:clamp(52px,9.5vw,150px);    /* page hero */
  --t-h1:clamp(60px,11vw,190px);     /* home hero */

  /* Fluid space scale. Section rhythm breathes with the viewport instead of
     paying desktop's fixed padding tax on a phone. Every big structural
     padding/margin in styles.css maps to one of these four. */
  --sp-section:clamp(72px,6vw + 40px,120px); /* section.block vertical */
  --sp-head:clamp(38px,5vw,60px);            /* sec-head bottom margin */
  --sp-gutter:clamp(20px,4vw,28px);          /* page + nav gutter */
  --sp-card:clamp(24px,4.5vw,40px);          /* large card interiors */

  --bg:#0a0a0a;
  --bg-2:#121212;
  --bg-3:#070504;
  --ink:#f5f1ea;
  --ink-soft:#cfc7bb;
  --muted:#9b9389;
  --fire-1:#ff3d00;
  --fire-2:#ff7a18;
  --fire-3:#ffb400;
  --gold:#e8c66b;
  --crimson:#a8160b;
  --line:rgba(245,241,234,.12);
  --cream:#f5f1ea;
}