/* ============================================================
   TOKENS - João Eugenio Oliveira Sociedade de Advogados
   Sincronizado com o Figma (arquivo Joao-Eugenio) e com o DESIGN.md.
   Fonte: template Legalist adaptado + hero desenhada pelo Caio.
   Regra: nenhum valor visual hardcoded fora deste arquivo.
   Coordenadas de composição de seção ficam em custom.css, escopadas.
   ============================================================ */

:root {
  /* ---- Cor: marca ---- */
  --color-navy-deep:   #0F2033;  /* fundo escuro / superfícies dark */
  --color-navy:        #1F3B5C;  /* azul institucional */
  --color-navy-soft:   #2E4E74;  /* faixa do ticker, hover sobre dark */
  --color-gold-line:   #B99B62;  /* filetes, marcadores, selo */
  --color-gold-bright: #E4AC41;  /* palavra-chave do H1, highlight-line e CTA */
  --color-gold-bright-deep: #CC9633;  /* hover do CTA */

  /* ---- Cor: neutros ---- */
  --color-white:       #FFFFFF;  /* texto sobre a hero */
  --color-paper:       #F7F5F1;  /* off-white quente */
  --color-neutral-100: #EDE9E1;
  --color-neutral-200: #D9D3C7;
  --color-neutral-400: #A49C8E;
  --color-neutral-600: #6E675C;  /* texto secundário, borda do header */
  /* texto secundário sobre neutral-100. O 600 foi calibrado para branco
     e paper: sobre a terceira superfície clara ele cai para 4,6:1, que
     passa raspando em AA. Este dá 6,6:1 e continua legível como
     secundário ao lado do ink, que dá 11,7:1. */
  --color-neutral-700: #514B41;
  --color-ink:         #2B2B2B;  /* grafite */

  /* ---- Filetes separadores ----
     Um filete que só separa dois blocos, sem mudança de fundo entre
     eles, tem um trabalho: ser visto. O site inteiro usava `neutral-200`
     no claro e `navy-soft` no escuro, que é o raciocínio de "um passo
     acima da superfície" - e nas duas paletas esse passo é curto demais:
     rendia de 1,1 a 1,9:1 e o filete sumia.
     Estes dois tokens são a única fonte para separador. Contorno de card
     NÃO usa daqui: lá o limite do bloco é dado pelo fundo, e subir a
     borda junto transformaria o site em wireframe. */
     Medidos: 2,5:1 sobre paper e 2,3:1 sobre neutral-100 no claro; 2,8:1
     sobre navy-deep e 2,3:1 sobre navy no escuro. Ficam abaixo dos 3:1
     de propósito - aquele piso é para gráfico essencial e controle de
     interface, e um separador decorativo em 3:1 vira barra. O que a
     regra exige mesmo é a borda de campo de formulário, e essa foi
     tratada à parte, em `neutral-400`. */
  --filete-claro:  var(--color-neutral-400);
  --filete-escuro: rgb(185 155 98 / 0.55);   /* gold-line a 55% */

  /* ---- Cor: semântica ---- */
  --color-success:     #3E6B4F;
  --color-error:       #8C3B31;

  /* ---- Tipografia ---- */
  --font-display: "Lora", Georgia, serif;
  --font-ui: "Instrument Sans", system-ui, sans-serif;

  /* escala vinda do Figma. h1/ticker fluidos entre mobile e desktop */
  --text-h1:      clamp(2.5rem, 1.6rem + 2.8vw, 4rem);      /* 40 -> 64 */
  --text-h2:      clamp(1.875rem, 1.35rem + 1.9vw, 3rem);   /* 30 -> 48 */
  --text-h3:      2rem;
  --text-h4:      1.5rem;
  --text-lead:    clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem); /* 18 -> 24 */
  --text-body:    1.125rem;                                  /* 18 */
  --text-small:   0.9375rem;                                 /* 15 */
  --text-eyebrow: 0.875rem;                                  /* 14 */
  --text-ticker:  clamp(1rem, 0.4rem + 1.9vw, 2.5rem);       /* 16 -> 40 */

  --leading-display: 1;      /* entrelinha travada dos títulos serif */
  --leading-tight: 1.25;
  --leading-body: 1.45;
  --leading-relaxed: 1.6;

  --tracking-display: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.14em;

  /* ---- Espaçamento ---- */
  --space-unit: 0.25rem;
  --space-block: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  --space-section: clamp(4.5rem, 3rem + 5vw, 8rem);

  --container-wide: 1296px;   /* header e seções */
  --container-text: 1120px;   /* leitura longa: pilar, artigo */
  --gutter: 1.5rem;

  /* ---- Forma ---- */
  --radius: 4px;              /* padrão do projeto */
  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-full: 999px;

  /* ---- Elevação ---- */
  --shadow-card: 0 4px 20px rgb(15 32 51 / 0.12);
  --shadow-lift: 0 2px 4px rgb(15 32 51 / 0.08), 0 16px 40px rgb(15 32 51 / 0.14);

  /* ---- Movimento (medido no template Legalist) ---- */
  --duration-fast:   200ms;
  --duration-base:   350ms;
  --duration-reveal: 500ms;
  --duration-slow:   700ms;
  --ease-out-quad:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --transition-base: var(--duration-base) var(--ease-out-quad);
}