/* ============================================================
   overA Capital, design tokens  (editorial-human system)
   Display = Newsreader (warm editorial serif, the #1 human signal).
   Body / UI = Barlow (the brand font). Two families, no third, no mono.
   Warm paper by default, one earned espresso moment, terracotta rationed
   to a single accent phrase + CTAs. Flat surfaces (manual: no shadow):
   hierarchy comes from type contrast + whitespace + hairlines.
   ============================================================ */

:root {
  /* ---- Brand palette (exact hex from Manual de Identidade v1.0) ---- */
  --verde:        #71883A;
  --verde-claro:  #A5BD4A;
  --verde-escuro: #505C39;
  --marrom:       #BA7027;   /* terracotta, primary accent */
  --marrom-claro: #E18E38;
  --marrom-escuro:#8A4D1F;
  --argila:       #E2A160;
  --argila-claro: #FCD0AF;
  --argila-escuro:#A88A69;
  --areia:        #CCC1AF;
  --areia-claro:  #E3DCC9;
  --areia-escuro: #948677;

  /* ---- Semantic surfaces ---- */
  --paper:        #FBF7EE;   /* primary warm off-white substrate */
  --paper-2:      #F4EEE0;   /* slightly deeper paper for framed surfaces */
  --oat:          #EFE7D5;   /* section tint */
  --oat-deep:     #E6DCC6;
  /* Exposure pass 2026-08-03 (client review: "o site parece ter um filtro
     escuro"): the espresso band was near-black (#1C1508) and read as a grey
     veil on non-Apple monitors. Lifted ~one stop into a warm dark brown —
     still the one dark editorial moment, but the warmth is now visible and
     cream type sits on brown, not on black. */
  --espresso:     #241B0C;   /* ink / the one dark editorial band */
  --espresso-2:   #33291A;   /* raised surface on dark */
  --espresso-3:   #453A26;   /* hairline-ish raised on dark */

  /* ---- Accent ---- */
  --accent:       #BA7027;   /* terracotta, the only UI accent */
  --accent-deep:  #8A4D1F;
  --accent-soft:  #E18E38;   /* terracotta on dark, reads warmer */
  --accent-wash:  rgba(186,112,39,0.07);
  --accent-wash-2:rgba(186,112,39,0.12);  /* sector / capability chip fill, slightly stronger */
  --verde-wash:   rgba(113,136,58,0.10);  /* green chip fill for sector glyph chips */
  --verde-wash-2: rgba(113,136,58,0.16);

  /* ---- Text ---- */
  /* Exposure pass 2026-08-03: every "on dark" tier came up a stop, and the
     light-side tertiary came down, so captions/labels clear AA (4.5:1) on
     standard, brighter-gamma monitors instead of dissolving into the
     background. The hierarchy (primary > muted > faint) is preserved — only
     the floor moved. */
  --ink:          #1C1508;   /* primary text on light */
  --ink-muted:    #675943;   /* secondary text + two-tone headline clause (~6.4:1 on paper) */
  --ink-faint:    #7E6F55;   /* tertiary / captions on light (~4.6:1 on paper) */
  --on-dark:      #F5EFE0;   /* primary text on espresso */
  --on-dark-muted:rgba(245,239,224,0.84);   /* was 0.66 — captions were dissolving */
  --on-dark-faint:rgba(245,239,224,0.64);   /* was 0.42 — small labels were unreadable */

  /* ---- Lines (the brand's main separation device) ---- */
  --line:         rgba(28,21,8,0.16);
  --line-strong:  rgba(28,21,8,0.26);
  --line-ink:     rgba(28,21,8,0.58);   /* heavier editorial rule above a number/heading */
  /* hairlines on dark were invisible on brighter monitors — the structure the
     whole system leans on (rules, dividers, card borders) has to be seen */
  --line-on-dark: rgba(245,239,224,0.24);
  --line-on-dark-strong: rgba(245,239,224,0.42);

  /* ---- Type families ----
     Display: Newsreader, the editorial serif that carries every headline,
     giant numeral, deal name and pull-quote. Body/UI: Barlow.
     Legacy aliases keep every existing var(--serif)/var(--mono) reference
     working: --serif now resolves to Newsreader, --mono collapses to Barlow
     so any stray label renders as plain sans, never a tracked mono kicker. */
  --display: "Newsreader", "Spectral", Georgia, "Times New Roman", serif;
  --sans:    "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text:    var(--sans);
  --font-display: var(--display);
  --font-label:   var(--sans);
  --serif: var(--display);   /* legacy alias -> Newsreader */
  --mono:  var(--sans);      /* legacy alias -> Barlow (neutralizes old labels) */

  /* ---- Fluid type scale (editorial: big display, calm body) ---- */
  --fs-display: clamp(2.5rem, 1.6rem + 3.1vw, 4.6rem);   /* mid-page statement payoff + giant display moments */
  --fs-page-title: clamp(2.3rem, 1.3rem + 2.5vw, 3.4rem);/* THE one hero / page-title size — identical on every page (home · abordagem · transações · blog · contato) */
  --fs-stat:    clamp(3.4rem, 2rem + 6.4vw, 7rem);       /* giant serif numerals, loudest on the page */
  --fs-h1:      clamp(2.4rem, 1.6rem + 3.4vw, 4.1rem);
  --fs-h2:      clamp(1.95rem, 1.4rem + 2.3vw, 3.1rem);
  --fs-h3:      clamp(1.4rem, 1.18rem + 0.95vw, 1.95rem);
  --fs-h4:      clamp(1.18rem, 1.06rem + 0.45vw, 1.4rem);
  --fs-lead:    clamp(1.18rem, 1.06rem + 0.5vw, 1.4rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.9375rem;   /* 15px */
  --fs-xs:      0.8125rem;   /* 13px */
  --fs-eyebrow: 0.9375rem;   /* legacy; now a plain muted sentence, not a kicker */

  /* ---- Spacing (expensive editorial rhythm) ---- */
  --container:  1240px;
  --container-narrow: 880px;
  --container-text: 720px;
  --gutter:     clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
  /* Section rhythm (client review 2026-08-28: "os respiros variam muito de
     bloco para bloco"): ONE fixed scale, applied on every page.
       --section-y     96px on phones · 128px on tablets · 160px from 1280px
       --section-y-sm  the half-step for a band that continues the previous one
     The old --section-y-lg alias resolves to the same step (no third size). */
  --section-y:    6rem;      /* 96px */
  --section-y-sm: 3.5rem;    /* 56px */
  --section-y-lg: var(--section-y);

  /* Logo slots (client review 2026-08-28): the target and the acquirer marks
     display at the SAME size everywhere — hero tombstone, deal cards, deal
     dialog and deal pages. Height-fitted, width-capped. */
  --logo-target-h: clamp(34px, 2.8vw, 42px);
  --logo-acq-h:    clamp(26px, 2.1vw, 32px);
  --logo-target-w: 200px;
  --logo-acq-w:    150px;

  /* ---- Radius (one system: small controls + one card radius) ---- */
  --r-sm: 10px;    /* inputs, chips, small controls */
  --r:    14px;    /* the single card / frame radius */
  --r-lg: 14px;    /* alias -> card radius */
  --r-xl: 14px;    /* alias -> card radius */
  --r-pill: 999px;

  /* ---- Elevation (brand is flat; whisper-soft, warm, never harsh) ----
     The tactile-depth scale: rest state never exceeds --shadow; hover may
     lift to --shadow-lg. --shadow-hero is for the product screenshot (the one
     piece that earns presence). --shadow-dark is for elements on the espresso
     band. Never a default black drop-shadow. */
  --shadow-sm: 0 1px 2px rgba(28,21,8,0.04);
  --shadow:    0 2px 10px rgba(28,21,8,0.05);
  --shadow-lg: 0 10px 30px rgba(28,21,8,0.07);
  --shadow-hero: 0 22px 60px rgba(28,21,8,0.10);   /* product showcase only */
  --shadow-dark: 0 18px 50px rgba(0,0,0,0.34);

  /* ---- Tactile depth helpers ---- */
  --seal-opacity: 0.62;      /* O+A seal accent on tiles / deals */
  --lift: -3px;              /* card hover translateY (gated by reduced-motion) */
  --icon-chip: 44px;         /* Material-glyph circular chip on process steps */

  /* ---- Motion (calm, eased, short) ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.4s;
  --dur-slow: 0.7s;

  /* ---- Layout helpers ---- */
  --header-h: 78px;
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
}
@media (min-width: 721px) {
  :root { --section-y: 8rem; --section-y-sm: 4.5rem; }     /* 128 / 72 */
}
@media (min-width: 1280px) {
  :root { --section-y: 10rem; --section-y-sm: 5.5rem; }    /* 160 / 88 */
}

/* ============================================================
   Big-screen step (the igcp model, verified on their CSS):
   the fluid clamps above all cap near 1550px, so between 1550
   and 1920+ the canvas keeps growing while the design freezes —
   the page reads "zoomed out" next to the laptop rendering.
   Like igcp (container 90rem -> 95rem, H1 4.4 -> 6rem at 1920),
   we re-step type, container and section rhythm together at one
   deterministic breakpoint so 1920 shows the SAME composition,
   ~15-18% larger. ch-based measures scale with the type for free.
   ============================================================ */
@media (min-width: 1700px) {
  :root {
    --container:  1400px;

    --fs-display: 5.4rem;
    --fs-page-title: 3.9rem;  /* re-stepped with the rest of the scale so section h2 (3.55rem) never outranks a page title on wide screens */
    --fs-stat:    8.1rem;
    --fs-h1:      4.7rem;
    --fs-h2:      3.55rem;
    --fs-h3:      2.2rem;
    --fs-h4:      1.6rem;
    --fs-lead:    1.55rem;
    --fs-body:    1.1875rem;  /* 19px */
    --fs-small:   1.0625rem;  /* 17px */
    --fs-xs:      0.875rem;   /* 14px */

    --section-y:    11.5rem;
    --section-y-sm: 6.5rem;

    --header-h: 88px;
  }
}