/* ============================================================
   César Correa — Typography System (Royal Obsidian)
   Space Grotesk (futuristic display/titles) · Sora (body + UI)
   · JetBrains Mono (labels/data). Sans-serif throughout.
   All carry full Latin-Extended for EN / FR / ES.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Space Grotesk", "Sora", system-ui, sans-serif;
  --font-sans:    "Sora", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;

  /* ---- Weights ---- */
  --w-light:   300; /* @kind other */
  --w-regular: 400; /* @kind other */
  --w-medium:  500; /* @kind other */
  --w-semibold:600; /* @kind other */
  --w-bold:    700; /* @kind other */

  /* ---- Fluid type scale (clamped, desktop targets noted) ---- */
  --fs-display: clamp(2.75rem, 1.6rem + 4.4vw, 4.5rem); /* @kind other */
  --fs-h1:      clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); /* @kind other */
  --fs-h2:      clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); /* @kind other */
  --fs-h3:      clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); /* @kind other */
  --fs-h4:      clamp(1.1875rem, 1.05rem + 0.4vw, 1.3125rem); /* @kind other */
  --fs-body-lg: 1.1875rem;  /* 19  @kind other */
  --fs-body:    1.0625rem;  /* 17  @kind other */
  --fs-body-sm: 0.9375rem;  /* 15  @kind other */
  --fs-caption: 0.8125rem;  /* 13  @kind other */
  --fs-micro:   0.6875rem;  /* 11  @kind other */

  --fs-quote:        clamp(1.5rem, 1.1rem + 1.4vw, 2rem);   /* @kind other */
  --fs-newsletter:   clamp(2.25rem, 1.6rem + 2.2vw, 2.75rem);/* @kind other */
  --fs-carousel:     clamp(2rem, 1.4rem + 2.4vw, 2.75rem);  /* @kind other */
  --fs-stat:         clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem);/* @kind other */

  /* ---- Line heights ---- */
  --lh-tight:   1.08; /* @kind other */
  --lh-snug:    1.2;  /* @kind other */
  --lh-heading: 1.22; /* @kind other */
  --lh-body:    1.62; /* @kind other */
  --lh-relaxed: 1.7;  /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-tight:   -0.02em;  /* @kind other */
  --ls-snug:    -0.012em; /* @kind other */
  --ls-normal:  0;        /* @kind other */
  --ls-wide:    0.04em;   /* @kind other */
  --ls-kicker:  0.16em;   /* @kind other */
  --ls-caps:    0.08em;   /* @kind other */
}

/* ---- Optional reusable text classes (semantic, brand-true) ---- */
.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--w-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.t-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--w-medium); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); color: var(--text); }
.t-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--w-medium); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); color: var(--text); }
.t-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--w-semibold); line-height: var(--lh-snug); color: var(--text); }
.t-h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: var(--w-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--text); }

.t-body-lg { font-family: var(--font-sans); font-size: var(--fs-body-lg); font-weight: var(--w-regular); line-height: var(--lh-relaxed); color: var(--text); }
.t-body    { font-family: var(--font-sans); font-size: var(--fs-body);    font-weight: var(--w-regular); line-height: var(--lh-body);    color: var(--text); }
.t-body-sm { font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--w-regular); line-height: var(--lh-body);    color: var(--text); }

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--w-medium);
  line-height: 1.4;
  color: var(--text-muted);
}

/* Eyebrow / kicker — the system's signature label style */
.t-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-kicker);
  color: var(--amber-strong);
}

.t-data-label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
}

.t-quote {
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  font-weight: var(--w-regular);
  font-style: italic;
  line-height: 1.4;
  letter-spacing: var(--ls-snug);
  color: var(--text);
}

.t-stat {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: var(--w-medium);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}

.t-cta {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caps);
}