/* =========================================================
   LBR — Life & Business Results
   Colors & Typography foundations
   Source of truth: Identidade visual 2026 ("Pétalas") — logo-kit/ + social/
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand Palette (from Manual de Marca) ---------- */
  /* Primary — Navy Azure: confidence, solidity, clarity. Base color. */
  --lbr-navy:        #0A2E3F;
  --lbr-navy-700:    #071F2B; /* deeper, for hovers / shadow tints */
  --lbr-navy-500:    #1E5571; /* lifted */
  --lbr-navy-100:    #E3EDF3; /* tint, for soft fills */

  /* Secondary — Vibrant Orange: energy, action, CTAs */
  --lbr-orange:      #FF7A00;
  --lbr-orange-700:  #D96500; /* hover */
  --lbr-orange-500:  #FF9533; /* lifted */
  --lbr-orange-100:  #FFE8D1; /* tint */

  /* Steel blues — símbolo petals / charts / secondary accents */
  --lbr-steel:       #3E7CA6; /* azul aço */
  --lbr-steel-deep:  #1E5571; /* azul médio */
  --lbr-navy-soft:   #6FA8C9; /* navy claro — accent on dark surfaces */
  --lbr-slate:       #5C6B72; /* ardósia — muted gray-blue */

  /* Warm neutrals */
  --lbr-cream:       #F1ECE3; /* creme */
  --lbr-sand:        #F4F1EA; /* areia */

  /* Complementary 1 — Sage / Verde: balance, growth (legacy, use sparingly) */
  --lbr-sage:        #C0C891;
  --lbr-sage-deep:   #5A7A3A; /* derived from icon plates */

  /* Complementary 2 — Light Gray: neutrality, breathing room */
  --lbr-gray:        #D9D9D9;
  --lbr-gray-50:     #F5F5F5;
  --lbr-gray-200:    #E8E8E8;
  --lbr-gray-400:    #BDBDBD;
  --lbr-gray-600:    #6F6F6F;

  /* Complementary 3 — Carvalho Escuro: structure, foundation */
  --lbr-oak:         #51413E;
  --lbr-oak-700:     #3B2F2D;

  /* Pure */
  --lbr-white:       #FFFFFF;
  --lbr-black:       #111111;

  /* ---------- Semantic colors ---------- */
  --bg:              var(--lbr-white);
  --bg-muted:        var(--lbr-gray-50);
  --bg-inverse:      var(--lbr-navy);
  --bg-accent-soft:  var(--lbr-navy-100);

  --fg:              var(--lbr-navy);        /* primary text on light */
  --fg-muted:        var(--lbr-oak);
  --fg-soft:         var(--lbr-gray-600);
  --fg-on-dark:      var(--lbr-white);
  --fg-on-accent:    var(--lbr-white);

  --accent:          var(--lbr-orange);      /* CTAs, highlights */
  --accent-hover:    var(--lbr-orange-700);
  --accent-soft:     var(--lbr-orange-100);

  --border:          var(--lbr-gray);
  --border-strong:   var(--lbr-navy);
  --divider:         var(--lbr-gray-200);

  --success:         var(--lbr-sage-deep);
  --info:            var(--lbr-navy);
  --warning:         var(--lbr-orange);

  /* ---------- Typography ---------- */
  --font-heading:    "Poppins", system-ui, sans-serif;
  --font-body:       "Poppins", system-ui, sans-serif;
  --font-display:    "Poppins", system-ui, sans-serif;

  --fw-light:        300; /* @kind font */
  --fw-regular:      400; /* @kind font */
  --fw-medium:       500; /* @kind font */
  --fw-semibold:     600; /* @kind font */
  --fw-bold:         700; /* @kind font */
  --fw-extrabold:    800; /* @kind font */

  --lh-tight:        1.1; /* @kind font */
  --lh-snug:         1.25; /* @kind font */
  --lh-normal:       1.5; /* @kind font */
  --lh-loose:        1.7; /* @kind font */

  --ls-tight:        -0.01em; /* @kind font */
  --ls-normal:       0; /* @kind font */
  --ls-wide:         0.04em; /* @kind font */
  --ls-wider:        0.12em; /* @kind font */

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

  /* ---------- Spacing (4-pt grid) ---------- */
  --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 (minimal, slightly soft) ---------- */
  --r-sm:    2px;
  --r-md:    4px;
  --r-lg:    8px;
  --r-xl:    16px;
  --r-pill:  999px;

  /* ---------- Borders ---------- */
  --bw-hair:   1px; /* @kind other */
  --bw-rule:   2px; /* @kind other */
  --bw-thick:  3px; /* @kind other */

  /* ---------- Shadows (restrained, never glowy) ---------- */
  --shadow-sm:   0 1px 2px rgba(10, 46, 63, 0.06);
  --shadow-md:   0 4px 12px rgba(10, 46, 63, 0.08);
  --shadow-lg:   0 16px 40px rgba(10, 46, 63, 0.12);
  --shadow-image: 0 24px 60px rgba(10, 46, 63, 0.20);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:    150ms; /* @kind other */
  --dur-base:    240ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */

  /* ---------- Layout ---------- */
  --container:    1200px; /* @kind spacing */
  --container-narrow: 880px; /* @kind spacing */
  --header-h:     80px; /* @kind spacing */
}

/* ============================================================
   Semantic element styles — opt-in via class names below the
   reset so consumers can use them directly OR via custom selectors.
   ============================================================ */

.lbr-body, body.lbr {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lbr-h1, h1.lbr {
  font-family: var(--font-heading);
  font-weight: var(--fw-light);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  margin: 0;
}
.lbr-h2, h2.lbr {
  font-family: var(--font-heading);
  font-weight: var(--fw-light);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  margin: 0;
}
.lbr-h3, h3.lbr {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}
.lbr-h4, h4.lbr {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

.lbr-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-5xl);
  line-height: 0.95;
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.lbr-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
}

.lbr-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

.lbr-p, p.lbr {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.lbr-small {
  font-size: var(--fs-sm);
  color: var(--fg-soft);
}

.lbr-caption {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--fg-soft);
  text-transform: uppercase;
}

/* Accent underline used for KPI numbers / highlight words */
.lbr-mark {
  background-image: linear-gradient(transparent 62%, var(--accent-soft) 62%);
  background-repeat: no-repeat;
  padding: 0 0.1em;
}