/* ============================================================
   TED CONSULTING — TOKENS DE COR E TIPOGRAFIA
   Fonte de verdade. Importe este arquivo em qualquer artefato.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400;1,9..144,600;1,9..144,700;1,9..144,800&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ----------------------------------------------------------
     PALETA DE MARCA (fechada — não alterar)
     ---------------------------------------------------------- */
  --grafite:        #1C1C1E;  /* âncora / fundos escuros / texto principal */
  --petroleo:       #1A3A52;  /* primária institucional */
  --petroleo-deep:  #142e42;  /* hover/active de fundos petróleo */
  --petroleo-hover: #1f4a69;  /* hover de botões petróleo */
  --ambar:          #C8922A;  /* acento único de marca */
  --ambar-hover:    #b57e22;
  --ambar-deep:     #9e6d1b;
  --offwhite:       #F5F3EF;  /* base / superfícies claras */
  --azul-ui:        #5B9BD5;  /* UI, foco, numeração decorativa */
  --verde:          #70AD47;  /* confirmações, badges positivos */

  /* ----------------------------------------------------------
     ALPHAS (para wash, badges, focus rings)
     ---------------------------------------------------------- */
  --petroleo-08:    rgba(26,58,82,0.08);
  --petroleo-12:    rgba(26,58,82,0.12);
  --petroleo-20:    rgba(26,58,82,0.20);
  --ambar-12:       rgba(200,146,42,0.12);
  --ambar-20:       rgba(200,146,42,0.20);
  --azul-10:        rgba(91,155,213,0.10);
  --verde-10:       rgba(112,173,71,0.10);
  --grafite-08:     rgba(28,28,30,0.08);
  --grafite-14:     rgba(28,28,30,0.14);
  --grafite-20:     rgba(28,28,30,0.20);

  /* ----------------------------------------------------------
     SUPERFÍCIES E BORDAS (semânticas)
     ---------------------------------------------------------- */
  --page-bg:        #EDEAE5;  /* fundo de página (off-white levemente +escuro) */
  --surface:        #F5F3EF;  /* superfície de card / nav */
  --surface-raised: #FAFAF8;  /* superfície destacada / input */
  --surface-dark:   #1A3A52;  /* superfície escura (petróleo) */
  --surface-darker: #1C1C1E;  /* superfície grafite */
  --border:         rgba(28,28,30,0.10);
  --border-mid:     rgba(28,28,30,0.16);
  --border-strong:  rgba(28,28,30,0.26);

  /* ----------------------------------------------------------
     TEXTO (semântico — use estes em vez de hexs diretos)
     ---------------------------------------------------------- */
  --fg-1:           #1C1C1E;  /* texto primário */
  --fg-2:           #5A5A60;  /* texto secundário / muted */
  --fg-3:           #8A8A94;  /* texto terciário / placeholder */
  --fg-on-dark:     #F5F3EF;  /* texto sobre fundo petróleo/grafite */
  --fg-on-dark-2:   rgba(245,243,239,0.55);
  --fg-on-dark-3:   rgba(245,243,239,0.35);
  --text-primary:   var(--fg-1);
  --text-muted:     var(--fg-2);
  --text-light:     var(--fg-3);

  /* ----------------------------------------------------------
     TIPOGRAFIA — FAMÍLIAS
     ---------------------------------------------------------- */
  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'Courier New', ui-monospace, SFMono-Regular, monospace;

  /* ----------------------------------------------------------
     TIPOGRAFIA — PAPÉIS SEMÂNTICOS
     (use --type-h1 como font-shorthand alternativo, ou veja
      a seção "/* Type roles */" abaixo)
     ---------------------------------------------------------- */
  /* Display (hero, grande citação) */
  --t-display-family:    var(--f-display);
  --t-display-weight:    800;
  --t-display-size:      52px;
  --t-display-lh:        1.0;
  --t-display-ls:        -0.035em;

  /* H1 (página/seção) */
  --t-h1-family:         var(--f-display);
  --t-h1-weight:         700;
  --t-h1-size:           36px;
  --t-h1-lh:             1.10;
  --t-h1-ls:             -0.025em;

  /* H2 */
  --t-h2-family:         var(--f-display);
  --t-h2-weight:         600;
  --t-h2-size:           26px;
  --t-h2-lh:             1.20;
  --t-h2-ls:             -0.015em;

  /* H3 */
  --t-h3-family:         var(--f-display);
  --t-h3-weight:         600;
  --t-h3-size:           20px;
  --t-h3-lh:             1.30;

  /* H4 — atenção: sans (Manrope), não serif */
  --t-h4-family:         var(--f-body);
  --t-h4-weight:         700;
  --t-h4-size:           16px;
  --t-h4-lh:             1.40;

  /* Body */
  --t-body-family:       var(--f-body);
  --t-body-weight:       400;
  --t-body-size:         15px;
  --t-body-lh:           1.70;

  /* Caption */
  --t-caption-family:    var(--f-body);
  --t-caption-weight:    400;
  --t-caption-size:      12px;
  --t-caption-lh:        1.55;

  /* Eyebrow (sempre âmbar OU azul-ui; nunca petróleo/grafite) */
  --t-eyebrow-family:    var(--f-body);
  --t-eyebrow-weight:    700;
  --t-eyebrow-size:      10px;
  --t-eyebrow-lh:        1.40;
  --t-eyebrow-ls:        0.20em;

  /* ----------------------------------------------------------
     ESPAÇAMENTO — múltiplos de 4px
     ---------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ----------------------------------------------------------
     RAIOS
     ---------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   6px;   /* botões, inputs */
  --r-md:  10px;   /* alerts, cards pequenos */
  --r-lg:  16px;   /* cards principais */
  --r-xl:  24px;   /* seções, banners */
  --r-pill: 100px; /* badges, chips */

  /* ----------------------------------------------------------
     SOMBRAS (todas tintadas em petróleo, não preto)
     ---------------------------------------------------------- */
  --shadow-sm:  0 1px 3px rgba(26,58,82,0.12);
  --shadow-md:  0 4px 16px rgba(26,58,82,0.12);
  --shadow-lg:  0 8px 32px rgba(26,58,82,0.14);
  --shadow-amb: 0 4px 16px rgba(200,146,42,0.28); /* só em CTAs âmbar */

  /* ----------------------------------------------------------
     TIMING / EASING
     ---------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast:    140ms;
  --d-base:    200ms;
  --d-slow:    320ms;
}

/* ============================================================
   BASE
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-1);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TYPE ROLES — classes utilitárias semânticas
   ============================================================ */
.t-display {
  font-family: var(--t-display-family);
  font-weight: var(--t-display-weight);
  font-size:   var(--t-display-size);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-ls);
  color: var(--petroleo);
}
.t-display em { font-style: italic; color: var(--ambar); }

.t-h1, h1 {
  font-family: var(--t-h1-family);
  font-weight: var(--t-h1-weight);
  font-size:   var(--t-h1-size);
  line-height: var(--t-h1-lh);
  letter-spacing: var(--t-h1-ls);
  color: var(--petroleo);
}
.t-h2, h2 {
  font-family: var(--t-h2-family);
  font-weight: var(--t-h2-weight);
  font-size:   var(--t-h2-size);
  line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-ls);
  color: var(--petroleo);
}
.t-h3, h3 {
  font-family: var(--t-h3-family);
  font-weight: var(--t-h3-weight);
  font-size:   var(--t-h3-size);
  line-height: var(--t-h3-lh);
  color: var(--fg-1);
}
.t-h4, h4 {
  font-family: var(--t-h4-family);
  font-weight: var(--t-h4-weight);
  font-size:   var(--t-h4-size);
  line-height: var(--t-h4-lh);
  color: var(--fg-1);
}
.t-body, p {
  font-family: var(--t-body-family);
  font-weight: var(--t-body-weight);
  font-size:   var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-1);
}
.t-caption {
  font-family: var(--t-caption-family);
  font-weight: var(--t-caption-weight);
  font-size:   var(--t-caption-size);
  line-height: var(--t-caption-lh);
  color: var(--fg-2);
}
.t-eyebrow {
  font-family: var(--t-eyebrow-family);
  font-weight: var(--t-eyebrow-weight);
  font-size:   var(--t-eyebrow-size);
  line-height: var(--t-eyebrow-lh);
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  color: var(--ambar);
}
.t-eyebrow.blue { color: var(--azul-ui); }

/* Itálico Fraunces — ÚNICA forma legítima de ênfase em títulos */
em, .em { font-style: italic; color: var(--ambar); }