/* ============================================================
   GymPro — Core Design Tokens: Color + Type
   Source: marketing-site screenshots (no codebase/Figma).
   Fonts loaded from Fontshare CDN (best-guess matches — see
   README "Font substitution" note). Swap @font-face to local
   files in /fonts if you have the originals.
   ============================================================ */

/* Clash Display (display/headings) + General Sans (body/UI) */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=general-sans@400,500,600,700&display=swap');

:root {
  /* ---- BRAND COLOR — Clínica Sergio Villanova ------------------- */
  /* Sampled from the SV logo (trinity knot + "Emagrecimento & Performance"). */
  --green:        #38993F;  /* PRIMARY brand green — CTAs, accents, icon chips, logo knot */
  --green-bright: #45B04D;  /* hover / brighter */
  --green-deep:   #2C7A33;  /* pressed / darker */

  /* --brand* are the canonical aliases — prefer these going forward. */
  --brand:        var(--green);
  --brand-bright: var(--green-bright);
  --brand-deep:   var(--green-deep);

  /* Legacy GymPro acid-lime — kept only so older cards still render.
     New work should use --green / --brand. */
  --lime:        #38993F;  /* repointed to brand green */
  --lime-bright: #45B04D;
  --lime-deep:   #2C7A33;

  /* ---- INK / DARK ------------------------------------------------- */
  --ink:         #0A0817;  /* near-black (cool) — primary dark surface + text */
  --ink-2:       #16151F;  /* slightly raised dark surface */
  --charcoal:    #2A2A33;  /* dark card / stat panel */
  --charcoal-2:  #30303C;  /* dark card translucent fill */

  /* ---- LIGHT / NEUTRAL -------------------------------------------- */
  --bg:          #F7F7F7;  /* page background (warm-neutral off-white) */
  --surface:     #FFFFFF;  /* white card surface */
  --surface-2:   #F1F1F0;  /* subtle inset / chip on light */
  --line:        #E6E6E4;  /* hairline borders on light */
  --line-dark:   rgba(255,255,255,0.10); /* hairline on dark */

  /* ---- TEXT ------------------------------------------------------- */
  --fg:          #0A0817;  /* primary text on light */
  --fg-2:        #5B5B63;  /* secondary / body gray on light */
  --fg-3:        #8C8C93;  /* tertiary / muted on light */
  --fg-on-dark:     #FFFFFF;                 /* primary text on dark */
  --fg-2-on-dark:   rgba(255,255,255,0.66);  /* secondary on dark */
  --fg-3-on-dark:   rgba(255,255,255,0.40);  /* muted on dark */

  /* ---- SEMANTIC --------------------------------------------------- */
  --success:     #38993F;  /* checks use the brand green */
  --on-lime:     #FFFFFF;  /* text/icon on a brand-green fill */
  --on-brand:    #FFFFFF;

  /* ---- TYPE FAMILIES ---------------------------------------------- */
  --font-display: 'Clash Display', 'Arial Narrow', sans-serif; /* headings */
  --font-body:    'General Sans', system-ui, -apple-system, sans-serif; /* body + UI */

  /* ---- TYPE SCALE (desktop) --------------------------------------- */
  --fs-display:  clamp(48px, 6vw, 88px);  /* hero H1 */
  --fs-h1:       clamp(40px, 4.4vw, 64px);
  --fs-h2:       clamp(32px, 3.4vw, 52px);
  --fs-h3:       28px;
  --fs-h4:       22px;
  --fs-lead:     18px;   /* intro paragraphs */
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-eyebrow:  14px;   /* pill labels */

  --lh-tight:    1.02;   /* big display headings */
  --lh-head:     1.08;
  --lh-body:     1.6;

  /* ---- RADII ------------------------------------------------------ */
  --r-pill:   999px;   /* buttons, chips, eyebrow labels */
  --r-card:   24px;    /* large content cards */
  --r-md:     16px;    /* medium cards / images */
  --r-sm:     10px;

  /* ---- SHADOWS / ELEVATION ---------------------------------------- */
  --shadow-sm:  0 2px 8px rgba(10,8,23,0.05);
  --shadow-md:  0 12px 32px rgba(10,8,23,0.08);
  --shadow-lg:  0 24px 60px rgba(10,8,23,0.12);

  /* ---- SPACING (8pt base) ----------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---- MOTION ----------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  0.25s;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Headings use Clash Display; note the tight tracking + leading.
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}
.t-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: -0.02em; }
.t-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: -0.015em; }
.t-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.01em; }
.t-h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); line-height: 1.2; }

.t-lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--fg-2); }
.t-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }
.t-sm   { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-sm); line-height: 1.5; }

/* Eyebrow / pill label — e.g. "About Our Gym", "Our Features".
   Always paired with a small lime dot before the text. */
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.01em;
  color: var(--fg);
}