/* ==========================================================================
   Celere Design System · tokens
   Fonte única de verdade. Todo preview e toda aplicação importa este arquivo.
   Conceito: Engenharia à Vista. Medido, calibrado, rastreável.

   Fontes: Plus Jakarta Sans e Manrope vêm do Google Fonts e cada arquivo que
   usa este CSS precisa trazer o <link> delas. A Neo Sans Intel é hospedada
   aqui e vem declarada logo abaixo. Procedência e decisão de uso da Neo Sans
   em assets/fonts/LEIA-ME.md.
   ========================================================================== */

/* Uma face só, declarada cobrindo 300..600 para que peso fora do previsto
   caia nela em vez de virar negrito sintético. O caminho é relativo a este
   arquivo, que mora em tokens/. */
@font-face {
  font-family: "Neo Sans Intel";
  src: url("../assets/fonts/NeoSansIntel-Medium.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- marca ---------------------------------------------------- */
  --celere-teal:        #00AFAF;  /* cor da marca: links, ícones ativos, foco */
  --celere-teal-deep:   #007878;  /* hover, texto teal acessível, fase acompanhamento */
  --celere-teal-ghost:  #E4F5F5;  /* fundo suave de chip, hover, selecionado */
  --celere-orange:      #F79633;  /* SÓ decisão: CTA primário, "você está aqui", delta */
  --celere-orange-deep: #D97A15;  /* hover do CTA e texto laranja GRANDE, >=24px, sobre paper */
  /* Laranja de TEXTO. orange-deep mede 3,00:1 sobre paper e 2,76:1 sobre mist,
     então só serve acima de 24px, e sobre mist não serve nem aí. Todo texto
     laranja abaixo de 24px usa este token: 4,96:1 sobre paper, 4,55:1 sobre mist. */
  --celere-orange-text: #A65A00;
  --celere-orange-ghost:#FDF0E0;  /* fundo de aviso, realce de delta */

  /* Cinza do wordmark, medido pixel a pixel no arquivo oficial da marca.
     USO EXCLUSIVO DA MARCA. Nunca em texto: é exatamente o #727376 que o
     DESIGN-SYSTEM.md cita como o cinza que reprovava AA no site antigo.
     Texto usa a escala de ink, sempre. */
  --celere-brand-grey: #727376;

  /* ---------- escala de ink ------------------------------------------- */
  --celere-ink:      #0E1B1E;  /* texto principal, fundo dark */
  --celere-ink-2:    #31474C;  /* texto secundário sobre claro · 8.7:1 */
  --celere-ink-3:    #5E7378;  /* terciário e caption · 4.6:1, piso do corpo */
  --celere-paper:    #FAFBFB;  /* fundo base claro */
  --celere-mist:     #EDF2F2;  /* seção alternada, card sobre paper */
  --celere-line:     #D8E2E2;  /* hairline, borda, régua */
  --celere-white:    #FFFFFF;

  /* ---------- dark ---------------------------------------------------- */
  --celere-line-dark:  #1E3238;
  --celere-paper-dark: #132226;
  --celere-ink-on-dark:      #F2F7F7;
  --celere-ink-2-on-dark:    #9FB6BA;
  /* Subiu de #6F878C em 07/08: o valor antigo media 4,30:1 sobre paper-dark e
     reprovava AA na superficie elevada, embora passasse sobre ink puro.
     Este da 4,71:1 sobre paper-dark, 5,06:1 sobre ink, 5,34:1 sobre sunken. */
  --celere-ink-3-on-dark:    #758E93;

  /* ---------- semânticos ---------------------------------------------- */
  --celere-success:       #007878;  /* sucesso herda teal-deep, não verde novo */
  --celere-success-ghost: #E4F5F5;
  --celere-danger:        #C4442A;
  --celere-danger-ghost:  #FBEAE6;
  /* Texto de erro sobre o proprio ghost: #C4442A da 4,28:1 e reprova.
     Este da 5,18:1 sobre danger-ghost e 5,83:1 sobre paper. */
  --celere-danger-text:   #B03A22;
  --celere-warning:       #D97A15;  /* aviso usa orange-deep */
  --celere-warning-ghost: #FDF0E0;
  --celere-info:          #31474C;
  --celere-info-ghost:    #EDF2F2;
  --ws-green:             #25D366;  /* único verde permitido, só WhatsApp */

  /* ---------- papéis de superfície ------------------------------------ */
  --surface-base:    var(--celere-paper);
  --surface-raised:  var(--celere-white);
  --surface-sunken:  var(--celere-mist);
  --surface-inverse: var(--celere-ink);
  --border-subtle:   var(--celere-line);
  --border-strong:   var(--celere-ink-3);
  /* Borda de campo focado é indicador NÃO TEXTUAL como o anel, e
     media os mesmos 2,61:1. Mesma correção, mesma razão. */
  --border-focus:    var(--celere-teal-deep);
  --text-primary:    var(--celere-ink);
  --text-secondary:  var(--celere-ink-2);
  --text-tertiary:   var(--celere-ink-3);
  --text-inverse:    var(--celere-ink-on-dark);

  /* ---------- fases do ciclo ------------------------------------------ */
  --fase-viabilidade:  var(--celere-teal);       /* F1, F2 */
  --fase-quantitativo: var(--celere-teal);       /* F3 */
  --fase-executivo:    var(--celere-teal);       /* F4 */
  --fase-planejamento: var(--celere-teal);       /* F5 */
  --fase-execucao:     var(--celere-teal-deep);  /* F6, F7 */
  --fase-agora:        var(--celere-orange);     /* o marco "você está aqui" */

  /* ---------- tipografia ---------------------------------------------- */
  /* Quatro papéis, quatro tokens. Nenhuma das famílias tem eixo de largura,
     então os tokens --wdth-condensed e --wdth-expanded saíram na v1: pedir
     "wdth" aqui não faz nada, e declaração que não faz nada engana quem lê. */
  --font-display: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-eyebrow: "Neo Sans Intel", "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  /* O nome "mono" ficou por compatibilidade: hub-cliente, site e ds-celere
     referenciam este token em dezenas de arquivos. O papel é DADO, não
     monoespaçada: a Manrope é proporcional e alinha por `tabular-nums`, que
     é obrigatório em todo uso deste token. A cauda continua monoespaçada de
     propósito, para o caso em que o webfont não carrega (e-mail, rede
     bloqueada): aí a coluna de número sobrevive sem depender do tabular. */
  --font-mono:    "Manrope", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --text-hero:    clamp(2.5rem, 8vw, 4.75rem);
  --text-h2:      clamp(1.9rem, 5vw, 3rem);
  --text-h3:      clamp(1.35rem, 3vw, 1.75rem);
  --text-h4:      1.125rem;
  --text-lead:    clamp(1.1rem, 2vw, 1.3rem);
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-micro:   0.75rem;
  --text-eyebrow: 0.8125rem;
  --text-stat:    clamp(2.25rem, 6vw, 3.5rem);

  --lh-tight: 1.02; /* @kind font */
  --lh-head:  1.1; /* @kind font */
  --lh-body:  1.65; /* @kind font */
  --ls-hero:  -0.03em; /* @kind font */
  --ls-head:  -0.02em; /* @kind font */
  --ls-eyebrow: 0.16em; /* @kind font */
  --ls-mono:  0.06em; /* @kind font */

  /* ---------- espaçamento · base 4px ---------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px;

  --section-pad: clamp(4rem, 10vw, 8rem); /* @kind spacing */
  --container:   1240px; /* @kind spacing */
  --gutter:      clamp(1.25rem, 5vw, 4rem); /* @kind spacing */
  --measure:     65ch;   /* @kind spacing */ /* limite de linha para leitura */
  --grid-gap:    24px; /* @kind spacing */

  /* ---------- raio · só 3 valores ------------------------------------- */
  --radius-s:    10px;   /* chip, input */
  --radius-m:    18px;   /* card */
  --radius-full: 999px;  /* pill, botão */

  /* ---------- elevação · só 2 sombras -------------------------------- */
  --shadow-s: 0 1px 2px rgb(14 27 30 / 0.06), 0 4px 12px rgb(14 27 30 / 0.06);
  --shadow-m: 0 2px 4px rgb(14 27 30 / 0.08), 0 16px 40px rgb(14 27 30 / 0.12);

  /* ---------- foco ---------------------------------------------------- */
  /* ⚠️ O ANEL DE FOCO USA `teal-deep`, E NÃO O TEAL DE MARCA.
     Medido pela fórmula da WCAG: `--celere-teal` dá 2,61:1 sobre paper, 2,71:1
     sobre branco e 2,40:1 sobre mist. A WCAG 1.4.11 exige 3:1 de indicador NÃO
     TEXTUAL, e o anel de foco é o exemplo canônico dela. O teal de marca
     reprovava nas três superfícies claras do sistema.
     `teal-deep` dá 4,70:1 no pior caso claro. No escuro o token volta a ser o
     teal de marca (ver o bloco `.dark`), porque ali `teal-deep` cairia para
     3,08:1, que passa raspando e não sobrevive a uma superfície um degrau mais
     clara.
     Anel de foco que some é a falha de acessibilidade mais fácil de cometer e
     a mais cara de descobrir depois: quem navega por teclado perde o rastro do
     cursor e o produto fica inoperável, sem nenhum sintoma para quem usa o
     mouse. */
  --focus-ring:   2px solid var(--celere-teal-deep); /* @kind other */
  --focus-offset: 2px; /* @kind other */

  /* ---------- motion --------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-1: 180ms;   /* @kind other */ /* micro: hover, foco */
  --dur-2: 420ms;   /* @kind other */ /* reveal */
  --dur-3: 800ms;   /* @kind other */ /* line-draw */
  --dur-count: 1400ms; /* @kind other */

  /* ---------- camadas -------------------------------------------------- */
  --z-base: 0; /* @kind other */
  --z-sticky: 10; /* @kind other */
  --z-drawer: 40; /* @kind other */
  --z-modal: 50; /* @kind other */
  --z-toast: 60; /* @kind other */
  --z-tooltip: 70; /* @kind other */

  /* ---------- grafismos · a assinatura -------------------------------- */
  /* régua: hairline com tick de medição a cada 8px */
  --pattern-regua: repeating-linear-gradient(90deg, var(--celere-line) 0 1px, transparent 1px 8px); /* @kind other */
  --pattern-regua-dark: repeating-linear-gradient(90deg, var(--celere-line-dark) 0 1px, transparent 1px 8px); /* @kind other */
  /* grid de blueprint: malha técnica de 24px com subdivisão de 8px */
  --pattern-blueprint:
    repeating-linear-gradient(0deg,  var(--celere-line) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--celere-line) 0 1px, transparent 1px 24px); /* @kind other */
  /* dot grid: pontos de 1px a cada 16px */
  --pattern-dots: radial-gradient(var(--celere-line) 1px, transparent 1px); /* @kind other */
  --pattern-dots-size: 16px 16px; /* @kind other */
  /* hachura técnica a 45 graus, para área estimada ou verba paramétrica */
  --pattern-hachura: repeating-linear-gradient(45deg, var(--celere-line) 0 1px, transparent 1px 6px); /* @kind other */
  /* degradê de instrumento: teal para transparente, usado em fundo de dado */
  --gradient-instrumento: linear-gradient(180deg, rgb(0 175 175 / 0.10), transparent); /* @kind other */
  --gradient-decisao:     linear-gradient(180deg, rgb(247 150 51 / 0.14), transparent); /* @kind other */
  --gradient-ink:         linear-gradient(180deg, transparent, rgb(14 27 30 / 0.86)); /* @kind other */
}

/* ==========================================================================
   Tema escuro. Aplique .dark no container, não no :root, para permitir
   seções claras e escuras na mesma página.
   ========================================================================== */
.dark {
  --surface-base:    var(--celere-ink);
  --surface-raised:  var(--celere-paper-dark);
  --surface-sunken:  #0A1518;
  --surface-inverse: var(--celere-paper);
  --border-subtle:   var(--celere-line-dark);
  --border-strong:   var(--celere-ink-3-on-dark);
  --text-primary:    var(--celere-ink-on-dark);
  --text-secondary:  var(--celere-ink-2-on-dark);
  --text-tertiary:   var(--celere-ink-3-on-dark);
  --text-inverse:    var(--celere-ink);
  --focus-ring:   2px solid var(--celere-teal); /* No escuro o anel volta ao teal de MARCA: 6,03:1 no pior caso, contra os 3,08:1 do teal-deep. Ver a nota no :root. */
  --pattern-regua:   var(--pattern-regua-dark); /* @kind other */
  --pattern-blueprint:
    repeating-linear-gradient(0deg,  var(--celere-line-dark) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--celere-line-dark) 0 1px, transparent 1px 24px); /* @kind other */
  --pattern-dots:    radial-gradient(var(--celere-line-dark) 1px, transparent 1px); /* @kind other */
  background: var(--surface-base);
  color: var(--text-primary);
}

/* ==========================================================================
   Base mínima compartilhada pelos previews
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  background: var(--surface-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Número é dado. Sempre tabular, porque a Manrope é proporcional.
   E sempre sem ligadura: a Manrope liga `--` num travessão, e este papel
   carrega nome de token CSS, código de EAP e identificador, onde a sequência
   de caracteres tem que sair literal. Fonte de código já vem assim de fábrica;
   como a face aqui é de texto, a regra precisa ser declarada. */
.mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variant-ligatures: none;
  letter-spacing: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  text-wrap: balance;   /* mata palavra viúva em título */
}
h1 { font-weight: 700; font-size: var(--text-hero);
     line-height: var(--lh-tight); letter-spacing: var(--ls-hero); }
h2 { font-weight: 620; font-size: var(--text-h2);
     line-height: var(--lh-head); letter-spacing: var(--ls-head); }
h3 { font-weight: 600; font-size: var(--text-h3); line-height: 1.15; }
h4 { font-weight: 600; font-size: var(--text-h4); line-height: 1.3; }
p  { margin: 0; text-wrap: pretty; }   /* mata palavra viúva em prosa */

.eyebrow {
  display: block;
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--celere-teal-deep);
}
.dark .eyebrow { color: var(--celere-teal); }

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}