/* GERADO a partir de ../../colors_and_type.css — sem a @font-face JetBrains Mono (não usada no site).
   Se alterar os tokens, regenere esta cópia. */
/* =============================================================
   BODYLINES · Design Tokens
   Colors + Typography (base + semantic)
   ============================================================= */

/* -------------------- FONTS --------------------
   Primary display: Conthrax SB (local file).
   Body: system stack — avoids 30KB+ Google Fonts request,
   loads instantly, looks great everywhere.
-------------------------------------------------------- */
@font-face {
  font-family: 'Conthrax SB';
  src: url('fonts/Conthrax-SB.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -------------- COLOR · BASE -------------- */
  /* Very Peri — signature color (Pantone 17-3938) */
  --bl-peri: #6667AB;
  --bl-peri-dark: #3D3E7A;   /* Peri Escuro — premium backgrounds */
  --bl-peri-light: #A8A9D4;  /* Peri Claro — support & accents */

  /* Neutrals */
  --bl-black: #0A0A0A;
  --bl-off-white: #F4F4F8;
  --bl-white: #FFFFFF;

  /* Extended tints (derived, for UI) */
  --bl-peri-50:  #F2F2F8;
  --bl-peri-100: #E4E5F1;
  --bl-peri-200: #C8CAE3;
  --bl-peri-300: #A8A9D4;   /* = peri-light */
  --bl-peri-400: #878AC4;
  --bl-peri-500: #6667AB;   /* = peri (primary) */
  --bl-peri-600: #585997;
  --bl-peri-700: #484A85;
  --bl-peri-800: #3D3E7A;   /* = peri-dark */
  --bl-peri-900: #2A2B5C;

  /* Grays (neutral scale, slightly cool) */
  --bl-gray-50:  #F4F4F8;
  --bl-gray-100: #EAEAF0;
  --bl-gray-200: #D8D8E0;
  --bl-gray-300: #BCBCC7;
  --bl-gray-400: #9A9AA7;
  --bl-gray-500: #6F6F7D;
  --bl-gray-600: #4E4E5A;
  --bl-gray-700: #34343E;
  --bl-gray-800: #1F1F26;
  --bl-gray-900: #0A0A0A;

  /* Semantic (derived, consultative health palette) */
  --bl-success: #3FAE7B;
  --bl-warning: #E2A93B;
  --bl-danger:  #C85151;
  --bl-info:    var(--bl-peri);

  /* WhatsApp brand (for CTA buttons — required by brief) */
  --bl-whatsapp:      #25D366;
  --bl-whatsapp-dark: #1DA851;

  /* -------------- COLOR · SEMANTIC -------------- */
  --bg:           var(--bl-off-white);
  --bg-elevated:  var(--bl-white);
  --bg-premium:   var(--bl-peri-dark);
  --bg-dark:      var(--bl-black);
  --bg-muted:     var(--bl-peri-50);

  --fg:           var(--bl-gray-900);
  --fg-muted:     var(--bl-gray-600);
  --fg-subtle:    var(--bl-gray-500);
  --fg-on-dark:   var(--bl-off-white);
  --fg-on-peri:   #FFFFFF;
  --fg-brand:     var(--bl-peri);

  --border:       var(--bl-gray-200);
  --border-strong:var(--bl-gray-300);
  --border-brand: var(--bl-peri-300);

  --accent:       var(--bl-peri);
  --accent-hover: var(--bl-peri-600);
  --accent-press: var(--bl-peri-700);

  /* -------------- TYPOGRAPHY · FAMILIES -------------- */
  --font-display: 'Conthrax SB', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* -------------- TYPOGRAPHY · SCALE (px) -------------- */
  /* Branding Book scale: H1 40pt / H2 28pt / H3 16pt / Body 12pt / Caption 10pt
     Translated to web with a slight bump for screen legibility.          */
  --fs-display: 56px;
  --fs-h1:      40px;
  --fs-h2:      28px;
  --fs-h3:      20px;
  --fs-h4:      16px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;
  --fs-overline:11px;

  /* -------------- WEIGHTS -------------- */
  --fw-light:    300; /* @kind other */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semi:     600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  /* -------------- LINE HEIGHTS -------------- */
  --lh-tight: 1.1; /* @kind other */
  --lh-snug:  1.25; /* @kind other */
  --lh-base:  1.55; /* @kind other */
  --lh-loose: 1.75; /* @kind other */
  /* -------------- TRACKING -------------- */
  --tr-tight:   -0.02em; /* @kind other */
  --tr-normal:  0; /* @kind other */
  --tr-wide:    0.04em; /* @kind other */
  --tr-wider:   0.08em; /* @kind other */
  --tr-overline:0.14em; /* @kind other */
  /* -------------- SPACING (4px base) -------------- */
  --sp-0:  0; /* @kind spacing */
  --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;

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

  /* -------------- SHADOWS -------------- */
  --shadow-xs: 0 1px 2px rgba(61,62,122,0.06);
  --shadow-sm: 0 2px 6px rgba(61,62,122,0.08);
  --shadow-md: 0 6px 18px rgba(61,62,122,0.10);
  --shadow-lg: 0 18px 40px rgba(61,62,122,0.14);
  --shadow-glow: 0 0 0 4px rgba(102,103,171,0.18);

  /* -------------- MOTION -------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
  /* -------------- LAYOUT -------------- */
  --container-max: 1200px; /* @kind other */
  --gutter: var(--sp-5);
}

/* =============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================= */
.bl-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}
.bl-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}
.bl-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.bl-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.bl-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.bl-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--fg);
}
.bl-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--fg-muted);
}
.bl-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
}
.bl-overline {
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tr-overline);
  color: var(--fg-brand);
}

/* =============================================================
   GLOBAL RESET-LITE (opt-in)
   ============================================================= */
.bl-scope {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bl-scope h1, .bl-scope h2, .bl-scope h3, .bl-scope h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
.bl-scope p { margin: 0; text-wrap: pretty; }