/* =====================================================================
   ARKE CREATIVE — Typography tokens
   Gilroy across all applications — geometric, symmetrical sans that
   matches the bespoke logo letterforms.
   Real Gilroy .otf files are loaded via fonts/fonts.css (Light 300,
   Regular 400, SemiBold 600, Bold 700). Medium (500) was not supplied
   and maps to Regular; Century Gothic is the web-safe digital fallback.
   ===================================================================== */

:root {
  /* ---- TYPE FAMILIES ----
     Web-safe brand fallback for digital/email is Century Gothic (Futura-like). */
  --font-display: "Gilroy", "Century Gothic", "Futura", system-ui, sans-serif;
  --font-body:    "Gilroy", "Century Gothic", "Futura", system-ui, sans-serif;

  /* ---- WEIGHTS (named per guidelines p.22) ---- */
  --w-light:    300;   /* @kind font */ /* body */
  --w-regular:  400;   /* @kind font */ /* paragraph titles */
  --w-medium:   500;   /* @kind font */ /* captions, secondary, footnotes, eyebrows */
  --w-semibold: 600;   /* @kind font */ /* subheads / standfirsts (italics OK) */
  --w-bold:     700;   /* @kind font */ /* headlines */

  /* ---- TYPE SCALE ---- */
  --t-display: 72px;
  --t-h1: 52px;
  --t-h2: 38px;
  --t-h3: 27px;
  --t-h4: 20px;
  --t-body: 17px;
  --t-small: 14px;
  --t-caption: 12px;

  /* ---- TRACKING ---- */
  --track-display: -0.03em;  /* tight on display */
  --track-tight:   -0.02em;
  --track-body:     0em;
  --track-eyebrow:  0.18em;   /* wide on uppercase labels */
}

/* --------------------------- BASE TYPE ------------------------------ */
.arke-type, body.arke {
  font-family: var(--font-body);
  font-weight: var(--w-light);
  color: var(--fg1);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display & headings — Gilroy Bold, tight tracking */
.arke-display, h1.arke, h2.arke, h3.arke {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  color: var(--fg1);
  line-height: 1.05;
  letter-spacing: var(--track-tight);
  margin: 0;
}
.arke-display { font-size: var(--t-display); letter-spacing: var(--track-display); }
h1.arke { font-size: var(--t-h1); }
h2.arke { font-size: var(--t-h2); }
h3.arke { font-size: var(--t-h3); letter-spacing: -0.01em; }

/* Subheads / standfirsts — Gilroy Semi Bold (italics OK) */
.arke-subhead {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-h4);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
}

/* Paragraph titles — Gilroy Regular */
h4.arke, .arke-para-title {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--t-h4);
  letter-spacing: -0.005em;
  margin: 0;
}

/* Body — Gilroy Light */
p.arke, .arke-body {
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--t-body);
  line-height: 1.6;
  margin: 0 0 1em;
  max-width: 64ch;
  text-wrap: pretty;
}

/* Captions / secondary — Gilroy Medium */
.arke-caption {
  font-weight: var(--w-medium);
  font-size: var(--t-caption);
  color: var(--fg2);
  line-height: 1.4;
}

/* Eyebrow / label — uppercase Medium, wide tracking */
.arke-eyebrow {
  font-weight: var(--w-medium);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--carmine);
}

/* Small caps for acronyms / "arke creative" lockups */
.arke-smallcaps { font-variant: small-caps; letter-spacing: 0.04em; }