/* ============================================
   DSAM Saúde — Colors & Typography Foundations
   ============================================ */

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND CORE ---------- */
  --teal:        #1DBCBC;  /* Primary brand — água/piscina */
  --teal-600:    #17A3A3;
  --teal-700:    #108585;
  --teal-100:    #CFF0F0;
  --teal-50:     #EAF9F9;

  --pink:        #E91E8C;  /* Accent — energia, urgência */
  --pink-600:    #C71879;
  --pink-100:    #FBD2E7;
  --pink-50:     #FDEBF4;

  --navy:        #0F2044;  /* Text + grounding */
  --navy-800:    #1A2E5C;
  --navy-600:    #32457A;
  --navy-400:    #6B7BA0;

  --green:       #22C55E;  /* CTA — WhatsApp */
  --green-600:   #16A34A;
  --green-700:   #15803D;
  --green-100:   #DCFCE7;

  /* ---------- NEUTRALS ---------- */
  --white:       #FFFFFF;
  --cream:       #FAFBFC;
  --gray-50:     #F5F7FA;
  --gray-100:    #EDF0F5;
  --gray-200:    #D9DFE8;
  --gray-400:    #8A96AD;
  --gray-600:    #4A5876;
  --black:       #0A0F1E;

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg:          var(--white);
  --bg-soft:     var(--cream);
  --bg-muted:    var(--gray-50);
  --bg-brand:    var(--teal);
  --bg-brand-soft: var(--teal-50);
  --bg-invert:   var(--navy);

  --fg:          var(--navy);
  --fg-muted:    var(--navy-600);
  --fg-subtle:   var(--gray-600);
  --fg-invert:   var(--white);
  --fg-accent:   var(--pink);
  --fg-brand:    var(--teal);

  --border:      var(--gray-200);
  --border-soft: var(--gray-100);

  --cta:         var(--green);
  --cta-hover:   var(--green-600);
  --cta-press:   var(--green-700);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* ---------- TYPE SCALE (fluid-friendly base) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;
  --text-5xl:  56px;
  --text-6xl:  72px;
  --text-7xl:  96px;

  /* ---------- WEIGHTS ---------- */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-extra:    800;

  /* ---------- RADII ---------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;   /* cards */
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;  /* buttons */

  /* ---------- SHADOW SYSTEM ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 32, 68, 0.06);
  --shadow-sm: 0 2px 8px rgba(15, 32, 68, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 32, 68, 0.10);
  --shadow-lg: 0 20px 48px rgba(15, 32, 68, 0.14);
  --shadow-xl: 0 32px 64px rgba(15, 32, 68, 0.18);
  --shadow-cta: 0 8px 24px rgba(34, 197, 94, 0.35);
  --shadow-teal: 0 12px 32px rgba(29, 188, 188, 0.28);
  --shadow-pink: 0 12px 32px rgba(233, 30, 140, 0.28);

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

  /* ---------- EASING ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============================================
   SEMANTIC TYPOGRAPHY
   ============================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-extra);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--fg);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-extra);
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--fg);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-3xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-brand);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.p-sm { font-size: var(--text-base); }
.caption { font-size: var(--text-sm); color: var(--fg-subtle); }

a { color: var(--teal-600); text-decoration: none; }
a:hover { color: var(--teal-700); }