/* ============================================================
   Creativity DS — Typography Tokens
   ============================================================ */

:root {

  /* ── Font families ──────────────────────────────────────── */

  /* Display / Headlines: Space Grotesk (MySpec, Aura, default) */
  --font-display:    "Space Grotesk", system-ui, sans-serif;

  /* Condensed display: Barlow Condensed (STARK Agency) */
  --font-condensed:  "Barlow Condensed", "Space Grotesk", sans-serif;

  /* Rounded display: Sora (Lifey Aurora/Midnight) */
  --font-rounded:    "Sora", system-ui, sans-serif;

  /* Playful display: Fredoka (Lifey Bloom) */
  --font-playful:    "Fredoka", "Quicksand", system-ui, sans-serif;

  /* Body: Inter (MySpec, Aura, default) */
  --font-body:       "Inter", system-ui, sans-serif;

  /* Body alt: DM Sans (STARK Agency) */
  --font-body-alt:   "DM Sans", "Inter", system-ui, sans-serif;

  /* Body humanist: Hanken Grotesk (Lifey) */
  --font-humanist:   "Hanken Grotesk", system-ui, sans-serif;

  /* Festive: Nunito (Secret Santa) */
  --font-festive:    "Nunito", system-ui, sans-serif;

  /* Mono: JetBrains Mono */
  --font-mono:       "JetBrains Mono", ui-monospace, monospace;

  /* Sporty: Oswald (Lifey Arena) */
  --font-sporty:     "Oswald", "Barlow Condensed", sans-serif;

  /* ── Type scale ─────────────────────────────────────────── */

  --text-2xs:   0.65rem;    /* 10.4px — kicker/overline */
  --text-xs:    0.72rem;    /* 11.5px — label */
  --text-sm:    0.82rem;    /* 13.1px — caption / nav */
  --text-base:  0.92rem;    /* 14.7px — body default */
  --text-md:    1rem;       /* 16px   — body large */
  --text-lg:    1.125rem;   /* 18px   — intro copy */
  --text-xl:    1.25rem;    /* 20px   — section sub */
  --text-2xl:   1.5rem;     /* 24px   — section title small */
  --text-3xl:   2rem;       /* 32px   — heading */
  --text-4xl:   2.75rem;    /* 44px   — hero sub */
  --text-5xl:   clamp(2.8rem, 5vw, 5.5rem);   /* section title */
  --text-6xl:   clamp(4.5rem, 9.5vw, 11rem);  /* STARK hero */
  --text-hero:  clamp(3.4rem, 8vw, 9.2vw);    /* MySpec / fluid hero */

  /* ── Line heights ───────────────────────────────────────── */

  --leading-tight:    0.9;   /* @kind other */
  --leading-condensed: 1.0;  /* @kind other */
  --leading-snug:     1.2;   /* @kind other */
  --leading-normal:   1.45;  /* @kind other */
  --leading-relaxed:  1.65;  /* @kind other */
  --leading-loose:    1.78;  /* @kind other */

  /* ── Letter spacing ─────────────────────────────────────── */

  --tracking-tightest: -0.03em; /* @kind other */   /* large display, tight */
  --tracking-tight:    -0.02em; /* @kind other */   /* display heads */
  --tracking-snug:     -0.01em; /* @kind other */   /* body heads */
  --tracking-normal:    0;      /* @kind other */
  --tracking-label:     0.04em; /* @kind other */   /* UI labels */
  --tracking-kicker:    0.14em; /* @kind other */   /* overlines */
  --tracking-wide:      0.2em;  /* @kind other */    /* STARK kickers */
  --tracking-widest:    0.32em; /* @kind other */   /* hero eyebrows */

  /* ── Font weights ───────────────────────────────────────── */

  --fw-light:    300;    /* @kind other */
  --fw-regular:  400;    /* @kind other */
  --fw-medium:   500;    /* @kind other */
  --fw-semibold: 600;    /* @kind other */
  --fw-bold:     700;    /* @kind other */
  --fw-extrabold: 800;   /* @kind other */
  --fw-black:    900;    /* @kind other */

  /* ── Kicker / label pattern (used across all 5 products) ── */
  /* Applied as a CSS class: .kicker */
}

/* Kicker overline — universal label treatment */
.kicker {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-faint);
  display: inline-block;
}
.kicker-amber { color: var(--raw-amber-100); }
.kicker-accent { color: var(--accent); }

/* Display heading utilities */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-condensed);
}
.display-condensed {
  font-family: var(--font-condensed);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
}
.display-rounded {
  font-family: var(--font-rounded);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}