/* ==========================================================================
   Thriving Sons — design tokens
   Single source of truth for colour, type, spacing. Change here, not in
   components.
   ========================================================================== */

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour — warm cream, charcoal, white, slate blue, restrained gold */
  --ts-cream: #f5efe3;
  --ts-cream-deep: #ebe3d2;
  --ts-white: #ffffff;
  --ts-charcoal: #262a2f;
  --ts-charcoal-soft: #454a51; /* body copy on cream: 8.3:1 */
  --ts-slate: #3f566b;         /* slate blue: 6.9:1 on cream */
  --ts-slate-deep: #2f4254;
  --ts-gold: #b08d3e;          /* decorative only — never for small text */
  --ts-gold-soft: #cdb06a;     /* gold for text and rules on charcoal: 6.9:1 */
  --ts-cream-muted: #d8d2c5;   /* body copy on charcoal: 9.6:1 */

  /* Type */
  --ts-font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --ts-font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Headline treatment (Option A: Source Serif 4) */
  --ts-title-weight: 700;
  --ts-title-variation: "opsz" 60;
  --ts-title-leading: 0.98;
  --ts-title-tracking: -0.025em;

  /* Fluid type scale */
  --ts-text-eyebrow: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --ts-text-lead: clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem);
  --ts-text-button: 1rem;
  --ts-text-display: clamp(2.375rem, 1.25rem + 7vw, 5.75rem);
  --ts-text-display-lg: clamp(3.5rem, 6.6vw, 5.25rem); /* desktop two-column hero */

  /* Spacing */
  --ts-space-1: 0.5rem;
  --ts-space-2: 1rem;
  --ts-space-3: 1.5rem;
  --ts-space-4: 2rem;
  --ts-space-5: 3rem;
  --ts-space-6: 4.5rem;
  --ts-gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --ts-container: 76rem;

  /* Shape */
  --ts-radius: 4px;
}