/* ============================================================
   T360 — Saúde Metabólica Integrativa
   Core design tokens: color + type
   ============================================================
   Brand essence: sophisticated · clinical · warm · premium
   Tagline: "Inteiro em cada mudança." (Whole in every change.)
   ------------------------------------------------------------
   FONTS
   - Display / headings / brand: Recoleta (commercial — Latinotype).
     No free CDN exists, so we substitute SPECTRAL (Google Fonts)
     as the nearest premium serif. License Recoleta for production
     and swap --font-display.
   - Supporting / UI / body: Suisse Int'l (commercial). Substituted
     with MANROPE (Google Fonts), which the brand board names as the
     approved free alternative.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---------- PRIMARY PALETTE ---------- */
  --petrol:        #0E2A28;  /* Verde Petróleo — signature dark */
  --sand:          #F3F1ED;  /* Areia — signature light ground */
  --charcoal:      #1E1E1E;  /* Carvão — text / deep neutral   */
  --taupe:         #8C867B;  /* Taupe — muted secondary        */
  --bronze:        #B87333;  /* Bronze — primary accent / gold */

  /* ---------- PETROL GREEN SCALE ---------- */
  /* Support greens drawn from the brand board's "cores de apoio". */
  --petrol-950:    #081A19;
  --petrol-900:    #0A201E;
  --petrol-800:    #0E2A28;  /* = --petrol */
  --petrol-700:    #163B38;
  --petrol-600:    #20504B;
  --petrol-500:    #356761;
  --petrol-400:    #5E817B;
  --petrol-300:    #8FA8A2;
  --petrol-200:    #BFCEC9;
  --petrol-100:    #DEE6E2;

  /* ---------- SAND / NEUTRAL SCALE ---------- */
  --sand-50:       #FBFAF8;
  --sand-100:      #F3F1ED;  /* = --sand */
  --sand-200:      #E9E5DD;
  --sand-300:      #DAD4C8;
  --sand-400:      #C4BCAD;
  --taupe-500:     #8C867B;  /* = --taupe */
  --taupe-600:     #6E695F;
  --ink-700:       #3A3A37;
  --ink-900:       #1E1E1E;  /* = --charcoal */

  /* ---------- METALLICS (the three rings) ---------- */
  --gold:          #C9A24A;
  --gold-soft:     #D8B968;
  --silver:        #BFC4C6;
  --silver-soft:   #DDE0E1;
  --bronze-light:  #D29A60;
  --bronze-dark:   #8F571F;
  /* Metallic gradients for ring-inspired accents (use sparingly) */
  --grad-gold:   linear-gradient(135deg, #E7C878 0%, #C9A24A 45%, #9C7322 100%);
  --grad-silver: linear-gradient(135deg, #EAEDEE 0%, #BFC4C6 45%, #8C9193 100%);
  --grad-bronze: linear-gradient(135deg, #E0A86F 0%, #B87333 45%, #7E4A18 100%);
  --grad-gold-text: linear-gradient(100deg, #BC8E36 0%, #DCB960 48%, #A6792A 100%);

  /* ---------- LUXE / PATIENT-FACING MODE (gold on cream) ----------
     The patient presentations & print collateral use a warm ivory
     ground with antique-gold accents — the brand's "light/luxe" mode,
     distinct from the dark petrol identity. */
  --cream:       #F5EEE1;  /* warm ivory ground            */
  --cream-2:     #EFE6D5;  /* slightly deeper panel         */
  --cream-line:  #E4D8C2;  /* hairline on cream             */
  --gold-ink:    #9C7A2E;  /* gold text that stays legible  */
  --gold-deep:   #B8923D;  /* heading gold                  */
  --gold-line:   #C9A24A;  /* rules, icon strokes, frames   */
  --ink-soft:    #4A4641;  /* warm body text on cream       */

  /* ---------- SEMANTIC: SURFACES ---------- */
  --bg:            var(--sand-100);   /* default page ground   */
  --bg-alt:        var(--sand-200);   /* alternating sections   */
  --bg-deep:       var(--petrol-800); /* hero / dark sections   */
  --surface:       #FFFFFF;           /* cards on sand          */
  --surface-deep:  var(--petrol-700); /* cards on petrol        */

  /* ---------- SEMANTIC: TEXT ---------- */
  --fg:            var(--charcoal);   /* primary text on light  */
  --fg-muted:      var(--taupe-600);  /* secondary text         */
  --fg-subtle:     var(--taupe-500);  /* captions / meta        */
  --on-petrol:     var(--sand-100);   /* primary text on dark   */
  --on-petrol-mut: var(--petrol-300); /* secondary on dark      */
  --accent:        var(--bronze);     /* links / accents        */
  --accent-ink:    var(--bronze-dark);/* accent text on light   */

  /* ---------- SEMANTIC: LINES ---------- */
  --border:        rgba(30,30,30,0.12);
  --border-strong: rgba(30,30,30,0.22);
  --border-on-deep:rgba(243,241,237,0.16);
  --hairline-bronze: var(--bronze);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Spectral', 'Recoleta', Georgia, 'Times New Roman', serif;
  --font-sans:    'Manrope', 'Suisse Int\'l', system-ui, -apple-system, sans-serif;

  /* ---------- TYPE SCALE (rem, 1rem = 16px) ---------- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  4rem;      /* 64 */
  --text-5xl:  5.5rem;    /* 88 */

  /* ---------- TRACKING ---------- */
  /* The wide-tracked uppercase label (e.g. "SAÚDE METABÓLICA
     INTEGRATIVA") is a core brand motif. */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.12em;
  --tracking-wider:  0.22em;   /* brand label tracking */
  --tracking-widest: 0.34em;

  /* ---------- RADII ---------- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  22px;
  --radius-pill: 999px;

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

  /* ---------- ELEVATION ---------- */
  /* Soft, low, warm shadows — never harsh. */
  --shadow-sm: 0 1px 2px rgba(14,42,40,0.06), 0 1px 3px rgba(14,42,40,0.05);
  --shadow-md: 0 4px 12px rgba(14,42,40,0.08), 0 2px 4px rgba(14,42,40,0.05);
  --shadow-lg: 0 18px 48px rgba(14,42,40,0.14), 0 6px 14px rgba(14,42,40,0.07);
  --shadow-deep: 0 24px 70px rgba(0,0,0,0.40);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  160ms;
  --dur-base:  280ms;
  --dur-slow:  520ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.t360-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-5xl);
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t360-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t360-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.t360-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.14;
  color: var(--fg);
}

.t360-h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--fg);
}

/* Wide-tracked uppercase brand label — the signature motif */
.t360-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-ink);
}

.t360-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--fg-muted);
}

.t360-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--fg);
}

.t360-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.t360-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}