/* =============================================================
   Triaseg Design System — Tokens
   Brand: Triaseg Corretora de Seguros (São Paulo, since 1996)
   Primary: teal-mint #39B298 (sampled directly from the logo)
   ============================================================= */

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

:root {
  /* ---------- Brand color ----------
     The teal-mint from the wordmark. We build a 9-step scale so we can
     use light tints for backgrounds and deep shades for hover/press. */
  --triaseg-50:  #ECF8F4;
  --triaseg-100: #D2F0E6;
  --triaseg-200: #A6E1CC;
  --triaseg-300: #79D2B3;
  --triaseg-400: #4DC29A;
  --triaseg-500: #39B298; /* ← exact logo color */
  --triaseg-600: #2E9580; /* hover */
  --triaseg-700: #237565; /* press / dark text on light */
  --triaseg-800: #1A574B;
  --triaseg-900: #103931;

  /* ---------- Neutrals ----------
     Slightly cool grays to sit alongside the teal without going muddy. */
  --gray-0:   #FFFFFF;
  --gray-50:  #F7F9F9;
  --gray-100: #EEF2F2;
  --gray-200: #DDE4E3;
  --gray-300: #C2CBCA;
  --gray-400: #97A3A2;
  --gray-500: #6E7B7A;
  --gray-600: #515E5D;
  --gray-700: #3A4544;
  --gray-800: #232B2A;
  --gray-900: #121817;

  /* ---------- Semantic — surface / fg ---------- */
  --bg:           var(--gray-0);
  --bg-subtle:    var(--gray-50);
  --bg-muted:     var(--gray-100);
  --bg-brand:     var(--triaseg-500);
  --bg-brand-soft:var(--triaseg-50);
  --bg-dark:      var(--gray-900);

  --fg:           var(--gray-900);
  --fg-muted:     var(--gray-600);
  --fg-subtle:    var(--gray-500);
  --fg-on-brand:  var(--gray-0);
  --fg-brand:     var(--triaseg-700);  /* readable teal on white */

  --border:       var(--gray-200);
  --border-strong:var(--gray-300);
  --divider:      var(--gray-100);

  /* ---------- Status (insurance product context) ---------- */
  --success: #2E9580;        /* same family as brand */
  --warning: #E8A23A;
  --danger:  #D9534F;
  --info:    #2D7BB3;

  /* ---------- Typography ---------- */
  --font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

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

  /* Type scale (rem, 16px base) */
  --fs-display: 4rem;     /* 64 — hero */
  --fs-h1:      3rem;     /* 48 */
  --fs-h2:      2.25rem;  /* 36 */
  --fs-h3:      1.5rem;   /* 24 */
  --fs-h4:      1.25rem;  /* 20 */
  --fs-lead:    1.125rem; /* 18 */
  --fs-body:    1rem;     /* 16 */
  --fs-small:   0.875rem; /* 14 */
  --fs-micro:   0.75rem;  /* 12 — only for eyebrows / fine print */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-eyebrow: 0.12em;  /* ALL-CAPS nav uses this */
  --tracking-tight:  -0.01em;
  --tracking-wide:    0.02em;

  /* ---------- Spacing (4px grid) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  /* ---------- Radius ---------- */
  --radius-sm:  6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(18, 24, 23, 0.06);
  --shadow-sm: 0 2px 6px rgba(18, 24, 23, 0.06), 0 1px 2px rgba(18, 24, 23, 0.04);
  --shadow-md: 0 8px 20px rgba(18, 24, 23, 0.08), 0 2px 4px rgba(18, 24, 23, 0.04);
  --shadow-lg: 0 18px 40px rgba(18, 24, 23, 0.10), 0 4px 8px rgba(18, 24, 23, 0.06);
  --shadow-brand: 0 14px 32px rgba(57, 178, 152, 0.28);
  --shadow-focus: 0 0 0 3px rgba(57, 178, 152, 0.30);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- Layout ---------- */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1280px;
}

/* =============================================================
   Element defaults — semantic vars in action
   ============================================================= */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: inherit;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold);  line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold);  line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold);  line-height: var(--lh-snug); }

p { margin: 0; line-height: var(--lh-relaxed); text-wrap: pretty; }
.lead  { font-size: var(--fs-lead); color: var(--fg-muted); line-height: var(--lh-relaxed); }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); }

/* The signature ALL-CAPS nav category style from triaseg.com.br */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--fs-small);
  color: var(--fg-brand);
}

a {
  color: var(--triaseg-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--triaseg-600); }

code, pre { font-family: var(--font-mono); font-size: 0.9em; }