/* ============================================================
   CASUALIZZE — Typography tokens
   Brand kit (Adobe Fonts, kit id xgd2hzj):
     • Display / DESTAQUE → helvetica-neue-lt-pro  (Light 300 → Black 900)
     • Texto corrido     → greycliff-cf            (Thin 100 → Black 900)
   ------------------------------------------------------------
   TYPE STRATEGY (v2 — owner direction, jun/2026):
   Helvetica Neue is now the DESTAQUE face — manchetes/títulos in
   heavy weight with tight tracking (the minimalist-fashion register,
   Zara/American-Apparel lineage). Greycliff CF moves to the running
   text / corpo, where its tall x-height reads warm and friendly, and
   still carries the italic accent ("só escolhe — a gente espera").
   The webfont @import below must stay the FIRST rule in this file.
   ============================================================ */

@import url('https://use.typekit.net/xgd2hzj.css');

:root {
  /* --- Families ---
     Token names keep their ROLE meaning: --font-display = destaque,
     --font-text = corpo. (The families behind them were swapped in v2.) */
  --font-display: 'helvetica-neue-lt-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* DESTAQUE — manchetes/títulos */
  --font-text:    'greycliff-cf', system-ui, sans-serif; /* corpo, UI, microcopy + acento itálico */

  /* --- Weights (all real cuts in the kit) ---
     Display works at the extremes: heavy for impact, thin/light for
     the giant atmospheric words. Mid weights for UI labels. */
  --fw-thin:      200; /* @kind font */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-heavy:     800; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* --- Type scale (1.250 major-third-ish, tuned) --- */
  --fs-3xs:  11px;
  --fs-2xs:  12px;
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl:  128px;  /* hero atmospheric words */

  /* --- Line heights --- */
  --lh-solid: 0.94;  /* @kind font */ /* stacked display headlines */
  --lh-tight: 1.06;  /* @kind font */
  --lh-snug:  1.22;  /* @kind font */
  --lh-body:  1.55;  /* @kind font */
  --lh-loose: 1.7;   /* @kind font */

  /* --- Letter-spacing ---
     Tight on big display; generous tracking on the small caps labels
     ("BOLSO CANGURU", category eyebrows). */
  --ls-tightest: -0.03em;  /* @kind font */
  --ls-tight:    -0.015em; /* @kind font */
  --ls-normal:   0;        /* @kind font */
  --ls-wide:     0.08em;   /* @kind font */
  --ls-wider:    0.16em;   /* eyebrow / small-caps labels @kind font */
  --ls-widest:   0.28em;   /* @kind font */

  /* --- Semantic roles ---
     Destaque (font-display = Helvetica Neue): bold 700 + tight tracking.
     Corpo (font-text = Greycliff CF): regular, warm. */
  --text-hero:      var(--fw-bold)     var(--fs-6xl)/var(--lh-solid) var(--font-display);
  --text-display:   var(--fw-bold)     var(--fs-4xl)/var(--lh-solid) var(--font-display);
  --text-title:     var(--fw-bold)     var(--fs-2xl)/var(--lh-tight) var(--font-display);
  --text-heading:   var(--fw-semibold) var(--fs-xl)/var(--lh-snug)  var(--font-display);
  --text-subhead:   var(--fw-medium)   var(--fs-lg)/var(--lh-snug)  var(--font-display);
  --text-body:      var(--fw-regular)  var(--fs-base)/var(--lh-body) var(--font-text);
  --text-small:     var(--fw-regular)  var(--fs-sm)/var(--lh-snug)  var(--font-text);
  --text-caption:   var(--fw-regular)  var(--fs-2xs)/var(--lh-snug) var(--font-text);
}