/* =============================================================
   Maxxi Saúde — Design Tokens
   Colors, type, spacing, radii, shadows, motion.
   Import this once at the top of any page.
   ============================================================= */

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

:root {
  /* ---------- Brand colors ---------- */
  /* Primary green — taken from the cross-mark and "Saúde" wordmark */
  --ms-green-50:  #f1f9ec;
  --ms-green-100: #e1f1d6;
  --ms-green-200: #c5e4ae;
  --ms-green-300: #a3d384;
  --ms-green-400: #8ccb71;
  --ms-green-500: #7ec365;   /* PRIMARY — the brand green */
  --ms-green-600: #6aaf52;
  --ms-green-700: #559143;
  --ms-green-800: #3f6f33;
  --ms-green-900: #2b4d24;

  /* Primary blue — taken from the "Maxxi" wordmark */
  --ms-blue-50:   #eef4f8;
  --ms-blue-100:  #d6e4ed;
  --ms-blue-200:  #aac6d7;
  --ms-blue-300:  #7aa6bd;
  --ms-blue-400:  #4d85a4;
  --ms-blue-500:  #296586;   /* PRIMARY — the brand blue */
  --ms-blue-600:  #205476;
  --ms-blue-700:  #1a445f;
  --ms-blue-800:  #143447;
  --ms-blue-900:  #0d2230;

  /* Neutrals — warm-cool, sit between greens and blues */
  --ms-white:     #ffffff;
  --ms-off-white: #f7faf6;
  --ms-neutral-50:  #f5f7f9;
  --ms-neutral-100: #ebeff2;
  --ms-neutral-200: #d8dee4;
  --ms-neutral-300: #b9c2cb;
  --ms-neutral-400: #8b97a3;
  --ms-neutral-500: #5e6b78;
  --ms-neutral-600: #424d59;
  --ms-neutral-700: #2c343d;
  --ms-neutral-800: #1b2128;
  --ms-neutral-900: #0d1115;

  /* Semantic colors */
  --ms-success: var(--ms-green-600);
  --ms-info:    var(--ms-blue-500);
  --ms-warning: #e8a93b;
  --ms-danger:  #cf4646;

  /* ---------- Semantic surfaces & text ---------- */
  --bg-page:        var(--ms-off-white);
  --bg-card:        var(--ms-white);
  --bg-subtle:      var(--ms-neutral-50);
  --bg-brand:       var(--ms-blue-500);
  --bg-brand-soft:  var(--ms-blue-50);
  --bg-accent:      var(--ms-green-500);
  --bg-accent-soft: var(--ms-green-50);

  --fg-strong:   var(--ms-blue-800);    /* headings */
  --fg-default:  var(--ms-neutral-700); /* body */
  --fg-muted:    var(--ms-neutral-500); /* secondary */
  --fg-faint:    var(--ms-neutral-400); /* hints */
  --fg-onbrand:  var(--ms-white);
  --fg-link:     var(--ms-blue-500);
  --fg-link-hover: var(--ms-blue-600);

  --border-subtle: var(--ms-neutral-200);
  --border-strong: var(--ms-neutral-300);
  --border-brand:  var(--ms-blue-200);

  /* ---------- Typography ---------- */
  --font-sans:    'Mulish', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Mulish', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — base 16 */
  --fz-xs:   12px;
  --fz-sm:   14px;
  --fz-base: 16px;
  --fz-md:   18px;
  --fz-lg:   20px;
  --fz-xl:   24px;
  --fz-2xl:  30px;
  --fz-3xl:  38px;
  --fz-4xl:  48px;
  --fz-5xl:  60px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ---------- Spacing — 4px base ---------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* ---------- Radii — soft rounded, friendly ---------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---------- Shadows — gentle, calm health vibe ---------- */
  --sh-xs: 0 1px 2px rgba(20, 52, 71, 0.06);
  --sh-sm: 0 2px 6px rgba(20, 52, 71, 0.08);
  --sh-md: 0 6px 16px rgba(20, 52, 71, 0.09);
  --sh-lg: 0 14px 32px rgba(20, 52, 71, 0.12);
  --sh-xl: 0 24px 60px rgba(20, 52, 71, 0.16);
  --sh-brand-glow: 0 12px 32px rgba(41, 101, 134, 0.22);
  --sh-accent-glow: 0 12px 32px rgba(126, 195, 101, 0.28);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;

  /* ---------- Layout ---------- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;
}

/* =============================================================
   Base typography — semantic element styles
   ============================================================= */

html { color-scheme: light; }
body {
  font-family: var(--font-sans);
  font-size: var(--fz-base);
  line-height: var(--lh-normal);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: var(--fz-4xl); font-weight: var(--fw-black); letter-spacing: -0.02em; }
h2 { font-size: var(--fz-3xl); }
h3 { font-size: var(--fz-2xl); }
h4 { font-size: var(--fz-xl); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fz-lg); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fz-md); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }

p { margin: 0 0 var(--sp-4); line-height: var(--lh-relaxed); text-wrap: pretty; }

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); text-decoration: underline; text-underline-offset: 3px; }

small, .text-small { font-size: var(--fz-sm); color: var(--fg-muted); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

/* Utility text classes that mirror the scale */
.t-display { font-family: var(--font-display); font-size: var(--fz-5xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--fg-strong); }
.t-h1 { font-size: var(--fz-4xl); font-weight: var(--fw-black); line-height: var(--lh-tight); color: var(--fg-strong); }
.t-h2 { font-size: var(--fz-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--fg-strong); }
.t-h3 { font-size: var(--fz-2xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--fg-strong); }
.t-lead { font-size: var(--fz-lg); line-height: var(--lh-relaxed); color: var(--fg-default); }
.t-body { font-size: var(--fz-base); line-height: var(--lh-relaxed); color: var(--fg-default); }
.t-small { font-size: var(--fz-sm); line-height: var(--lh-normal); color: var(--fg-muted); }
.t-eyebrow {
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ms-green-700);
}