/* =============================================================
   ESCALAB • Design tokens — v2 (harmonized)
   Baseado no ícone oficial + site escalab.com.br/quem-somos.
   Filosofia: uma cor-âncora, dois neutros, tipografia contida.
   ============================================================= */

/* Fonts ------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Instrument+Serif&display=swap');

:root {
  /* ── Brand green ─────────────────────────────────────────────
     Uma única escala verde, derivada do ícone oficial (#00967B).
     Use o verde-âncora (brand) em 90% dos casos. As demais são
     derivadas harmônicas — NÃO inventar novos verdes. */
  --escalab-brand:        #00967B;   /* âncora — da marca */
  --escalab-brand-hover:  #00836B;   /* hover de CTAs verdes */
  --escalab-brand-deep:   #005E4D;   /* texto sobre claro, titulos */
  --escalab-brand-deeper: #00382E;   /* fundo seção escura opcional */
  --escalab-brand-tint:   #E6F5F1;   /* fundo suave / card claro */
  --escalab-brand-soft:   #B5E3D7;   /* bordas e divisores verdes */
  --escalab-brand-accent: #5EE9C4;   /* acento claro — hover, destaque. Uso ESPORÁDICO. */

  /* ── Neutrals (só cinzas neutros, sem tint verde) ──────────── */
  --escalab-ink:       #0A0F12;      /* preto — fundo escuro */
  --escalab-charcoal:  #1A2128;      /* fundo card escuro */
  --escalab-slate:     #4A5560;      /* texto secundário */
  --escalab-mute:      #8A95A0;      /* labels, captions */
  --escalab-line:      #E4E7EB;      /* bordas */
  --escalab-paper:     #F7F8F9;      /* fundo claro da página */
  --escalab-white:     #FFFFFF;

  /* ── Semantic aliases ──────────────────────────────────────── */
  --bg-page:       var(--escalab-white);
  --bg-elevated:   var(--escalab-paper);
  --bg-dark:       var(--escalab-ink);
  --bg-brand:      var(--escalab-brand);

  --fg-primary:    var(--escalab-ink);
  --fg-secondary:  var(--escalab-slate);
  --fg-muted:      var(--escalab-mute);
  --fg-inverse:    var(--escalab-white);
  --fg-brand:      var(--escalab-brand);

  --border:        var(--escalab-line);
  --border-brand:  var(--escalab-brand-soft);

  /* ── Type ──────────────────────────────────────────────────── */
  /* Sem Coolvetica. Inter em todo o sistema + Instrument Serif
     opcional para um toque editorial (ex.: pull-quote). */
  --font-sans:     'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display:  'Inter', ui-sans-serif, system-ui, sans-serif;  /* mesma, peso mais alto */
  --font-serif:    'Instrument Serif', Georgia, serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Tipo escala (desktop 1280+) */
  --fs-display:    clamp(56px, 7vw, 88px);   /* H1 hero */
  --fs-h1:         clamp(40px, 4.8vw, 60px);
  --fs-h2:         clamp(32px, 3.6vw, 44px);
  --fs-h3:         28px;
  --fs-h4:         22px;
  --fs-lead:       18px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-eyebrow:    12px;

  /* Leading: headlines apertadas, corpo confortável */
  --lh-display: 1.02;
  --lh-heading: 1.15;
  --lh-body:    1.55;

  /* Tracking: negativo em displays (Inter aperta bem), neutro em corpo,
     positivo em eyebrow/UPPER. */
  --tr-display: -0.025em;
  --tr-heading: -0.015em;
  --tr-body:    0;
  --tr-eyebrow: 0.14em;

  /* ── Spacing (4-pt base, sem escala dupla) ─────────────────── */
  --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;

  /* ── Radius (uma escala conservadora) ──────────────────────── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* Default para cartões e botões. Sem inner-gloss. */
  --radius-card:   var(--r-md);
  --radius-button: var(--r-sm);

  /* ── Elevação (sutil — sem glow de neon) ───────────────────── */
  --shadow-sm:   0 1px 2px rgba(10,15,18,.05);
  --shadow-md:   0 4px 12px rgba(10,15,18,.08);
  --shadow-lg:   0 12px 32px rgba(10,15,18,.12);
  --shadow-dark: 0 8px 24px rgba(0,0,0,.35);

  /* ── Motion ────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-inout: cubic-bezier(.4,0,.2,1);
  --dur-fast: .18s;
  --dur: .26s;
  --dur-slow: .45s;
}

/* =============================================================
   Base styles
   ============================================================= */
html, body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tr-heading);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1);   letter-spacing: var(--tr-display); line-height: var(--lh-display); font-weight: 800; }
h2 { font-size: var(--fs-h2);   font-weight: 700; }
h3 { font-size: var(--fs-h3);   font-weight: 600; }
h4 { font-size: var(--fs-h4);   font-weight: 600; }

p {
  margin: 0 0 var(--sp-4);
  max-width: 60ch;
  text-wrap: pretty;
  color: var(--fg-secondary);
}

a { color: var(--fg-brand); text-decoration: none; transition: color var(--dur) var(--ease-out); }
a:hover { color: var(--escalab-brand-hover); }

small, .small { font-size: var(--fs-small); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Dark-mode section helper */
.on-dark {
  color: var(--fg-inverse);
  background: var(--bg-dark);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--fg-inverse); }
.on-dark p { color: rgba(255,255,255,.78); }
.on-dark .eyebrow { color: var(--escalab-brand-accent); }

/* =============================================================
   Usage notes
   -----------------------------------------------------------
   ▸ Verde: use --escalab-brand como única âncora em 90% dos
     casos. deep/deeper são para texto sobre fundo claro ou
     seções escuras verde-petróleo (raras). accent é um realce
     de hover — 1 elemento por tela.
   ▸ Nunca misturar Coolvetica, Poppins e display serif. A v2
     padroniza em Inter + Instrument Serif (opcional).
   ▸ Não usar inner-gloss, glow de neon ou gradient ribbons.
     A identidade busca calma, não ruído.
   ▸ O ícone oficial (arco + curva) é a assinatura — use-o
     limpo, em uma cor, tamanho mínimo 24px.
   ============================================================= */