/* ============================================================================
   SISTEMA.CSS — JOÃOSMELIM / CONTA FECHA
   v1 · 29/08/2026 · camada de execução de DESIGN-SYSTEM.md v1

   FONTE ÚNICA. Nenhum arquivo declara :root próprio.
   O condutor é a exceção declarada: ele cola este bloco inline porque roda
   ao vivo numa reunião e não pode depender de arquivo externo.
   Quando este arquivo mudar, sincronizar o condutor e subir a versão.

   ---------------------------------------------------------------------------
   DOUTRINA DE COR — resolve o C1
   ---------------------------------------------------------------------------
   AZUL PETRÓLEO  estrutura. Régua ativa, número da conta, kicker, marcador
                  de etapa. Nunca é botão.
   INDIGO         controle. O único preenchimento de ação da interface: botão
                  primário e anel de foco. Nada mais. Por ser funcional e não
                  expressivo, não conta como cor de acento — mesma lógica do
                  #0071e3 da Apple e do botão escuro do Attio.
   LARANJA        tensão. Único acento cromático expressivo. Traço, borda e
                  número. NUNCA texto sobre fundo claro (2,65:1) e NUNCA fundo
                  de bloco com texto branco (2,8:1). Vive sobre o preto, onde
                  mede 6,1:1, ou como régua de 3px sobre o off-white.
   PRETO          superfície de virada. Uma por peça, no momento da decisão.

   ELEVAÇÃO       zero sombra. Diferença de tom + hairline. (Augen Pro)
   ACENTO         uma cor expressiva por peça. Escassez é o mecanismo.
   ============================================================================ */


/* ── 1. FONTES ───────────────────────────────────────────────────────────────
   Locais. A pasta fonts/ vem no repositório, ao lado deste arquivo.
   Local em vez de CDN porque o condutor
   precisa abrir sem internet no meio de uma reunião.
   Ver CHECKLIST DE DEPLOY no rodapé deste arquivo.
   ─────────────────────────────────────────────────────────────────────────── */
@font-face{font-family:'Clash Display';src:url('fonts/ClashDisplay-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/ClashDisplay-Bold.woff2')     format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Medium.woff2')  format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Bold.woff2')    format('woff2');font-weight:700;font-style:normal;font-display:swap}


/* ── 2. TOKENS ────────────────────────────────────────────────────────────── */
:root{

  /* Paleta — espelho do mestre §43. Não editar aqui. */
  --azul:      #0F4C75;
  --laranja:   #F97316;
  --indigo:    #6366F1;
  --preto:     #1C1C1C;
  --off:       #F8F8F8;
  --charcoal:  #2C3E50;

  /* Superfícies — três, e só três */
  --sup-0:     #F8F8F8;   /* canvas padrão */
  --sup-1:     #FFFFFF;   /* campo e card sobre o canvas */
  --sup-2:     #1C1C1C;   /* superfície de virada */

  /* Linhas */
  --linha:     #DCE1E5;   /* hairline estrutural */
  --fina:      #E9EDF0;   /* hairline de item de lista */
  --linha-inv: rgba(255,255,255,.18);
  --fina-inv:  rgba(255,255,255,.10);

  /* Texto — sólido, medido. Substitui todo uso de opacity em texto.
     Contraste sobre --sup-0 / sobre --sup-2. */
  --txt-1:     #1C1C1C;   /* 16,2:1  título */
  --txt-2:     #2C3E50;   /* 10,3:1  corpo */
  --txt-3:     #5A6B7A;   /*  5,1:1  secundário, micro-label, legenda */
  --txt-inv-1: #F8F8F8;   /* 16,2:1  título sobre preto */
  --txt-inv-2: #A8B2BC;   /*  8,0:1  secundário sobre preto */

  /* Tipografia */
  --display: 'Clash Display', system-ui, -apple-system, sans-serif;
  --body:    'Satoshi', system-ui, -apple-system, sans-serif;

  /* Escala fluida. Um valor serve tela de celular e slide de 1920. */
  --t-micro:  clamp(10px,  .30vw + 9px,  12px);
  --t-label:  clamp(11px,  .40vw + 10px, 15px);
  --t-cap:    clamp(13px,  .45vw + 12px, 17px);
  --t-corpo:  clamp(16px,  .60vw + 14px, 21px);
  --t-lead:   clamp(17px,  .90vw + 15px, 25px);
  --t-h3:     clamp(20px, 1.10vw + 17px, 30px);
  --t-h2:     clamp(24px, 2.60vw + 16px, 46px);
  --t-h1:     clamp(34px, 5.20vw + 18px, 76px);
  --t-num:    clamp(56px, 9.00vw + 24px, 130px);

  /* Tracking — Clash aperta, micro-label abre, corpo fica neutro */
  --tr-num:   -.055em;
  --tr-h1:    -.042em;
  --tr-h2:    -.014em;   /* h2 é frase, roda em Satoshi Bold */
  --tr-disp:  -.030em;   /* título curto em Clash */
  --tr-corpo:  0;
  --tr-label:  .18em;

  /* Espaço — base 8 */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 88px; --s7: 120px; --s8: 160px;
  --gut:    clamp(20px, 5vw, 56px);
  --secao:  clamp(56px, 9vh, 112px);   /* respiro entre seções — Apple */

  /* Forma — resolve o C2 */
  --r:      4px;      /* card, campo, superfície */
  --r-btn:  999px;    /* botão. O §9 fixa 4px para superfície e cala sobre botão. */
  --hair:   1px;

  /* Motion */
  --ease:  cubic-bezier(.2,.8,.3,1);
  --rapido: 90ms;
  --medio:  160ms;
  --lento:  340ms;
}


/* ── 3. BASE ──────────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}

body{
  background:var(--sup-0);
  color:var(--txt-2);
  font-family:var(--body);
  font-size:var(--t-corpo);
  line-height:1.55;
  letter-spacing:var(--tr-corpo);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}

/* Superfície de virada. Uma por peça. */
.sup-escura{background:var(--sup-2);color:var(--txt-inv-1)}
.sup-escura .fraco{color:var(--txt-inv-2)}
.fraco{color:var(--txt-3)}


/* ── 4. ÓPTICA TIPOGRÁFICA ────────────────────────────────────────────────────
   §3. Clash Display só em número e título de até 4 palavras.
   Frase longa em Clash fica ilegível — h2 e afins rodam em Satoshi Bold.
   ─────────────────────────────────────────────────────────────────────────── */
.disp,.num,h1{
  font-family:var(--display);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.num{font-size:var(--t-num);line-height:.86;letter-spacing:var(--tr-num);color:var(--txt-1)}
h1  {font-size:var(--t-h1); line-height:.98;letter-spacing:var(--tr-h1); color:var(--txt-1)}
.disp{letter-spacing:var(--tr-disp);line-height:1.06;color:var(--txt-1)}

h2,h3,.frase{
  font-family:var(--body);
  font-weight:700;
  letter-spacing:var(--tr-h2);
  line-height:1.16;
  color:var(--txt-1);
}
h2{font-size:var(--t-h2);max-width:22ch}
h3{font-size:var(--t-h3);max-width:26ch}

.lead{font-size:var(--t-lead);line-height:1.5;color:var(--txt-2);max-width:38ch}
.cap {font-size:var(--t-cap); line-height:1.55;color:var(--txt-3);max-width:44ch}

/* Micro-label. Sempre --txt-3 ou --txt-inv-2, nunca opacity. */
.label{
  font-family:var(--body);
  font-size:var(--t-label);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--tr-label);
  color:var(--txt-3);
}
.sup-escura .label{color:var(--txt-inv-2)}

/* Kicker — a régua fina do §9, azul porque é estrutura */
.kicker{
  display:flex;align-items:center;gap:var(--s2);
  font-family:var(--body);font-size:var(--t-label);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--tr-label);
  color:var(--azul);margin-bottom:var(--s3);
}
.kicker::before{content:'';width:36px;height:var(--hair);background:currentColor;flex:none}
.sup-escura .kicker{color:var(--txt-inv-2)}


/* ── 5. BOTÃO ─────────────────────────────────────────────────────────────────
   Um preenchido por tela. Indigo, sempre.
   19px/700 não é escolha estética: branco sobre indigo mede 4,45:1, abaixo do
   4,5:1 exigido para texto normal. A 19px bold o texto entra no limiar de
   texto grande, onde o mínimo é 3:1. Reduzir o corpo do botão quebra AA.
   ─────────────────────────────────────────────────────────────────────────── */
.b{
  font-family:var(--body);
  font-size:19px;
  font-weight:700;
  line-height:1;
  padding:16px 26px;
  border:var(--hair) solid transparent;
  border-radius:var(--r-btn);
  cursor:pointer;
  touch-action:manipulation;
  min-height:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:transform var(--rapido) var(--ease),
             background var(--medio) ease-out,
             border-color var(--medio) ease-out;
}
.b:active{transform:scale(.975)}

.b--acao{background:var(--indigo);color:#fff}         /* o único preenchido */
.b--acao:hover{background:#5457E5}

.b--calmo{background:transparent;color:var(--txt-2);border-color:var(--linha)}
.b--calmo:hover{border-color:var(--txt-2)}

.b--quieto{background:transparent;color:var(--txt-3);border-color:var(--linha);font-weight:500}
.b--quieto:hover{color:var(--txt-2);border-color:var(--txt-3)}

.sup-escura .b--calmo,.sup-escura .b--quieto{color:var(--txt-inv-1);border-color:var(--linha-inv)}

.b--largo{width:100%}

/* Ação textual — "Voltar", "Refazer". Não compete com o botão. */
.b-txt{
  background:none;border:none;cursor:pointer;
  font-family:var(--body);font-size:var(--t-label);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--tr-label);
  color:var(--txt-3);padding:14px 0;
}
.b-txt:hover{color:var(--txt-2)}


/* ── 6. CAMPO ─────────────────────────────────────────────────────────────── */
input[type=text],input[type=number],textarea,select{
  width:100%;
  font-family:var(--body);
  font-size:var(--t-corpo);
  color:var(--txt-1);
  background:var(--sup-1);
  border:var(--hair) solid var(--linha);
  border-radius:var(--r);
  padding:14px 16px;
  transition:border-color var(--medio) ease-out;
}
input:hover,textarea:hover,select:hover{border-color:#B9C3CB}
textarea{min-height:80px;resize:vertical;line-height:1.55}
::placeholder{color:var(--txt-3);opacity:1}

.sup-escura input,.sup-escura textarea,.sup-escura select{
  background:rgba(255,255,255,.06);
  border-color:var(--linha-inv);
  color:var(--txt-inv-1);
}
.sup-escura ::placeholder{color:var(--txt-inv-2)}

label{display:block;font-size:var(--t-cap);font-weight:500;color:var(--txt-1);margin-bottom:9px}
.sup-escura label{color:var(--txt-inv-1)}
label .dica{display:block;font-size:var(--t-label);font-weight:400;color:var(--txt-3);text-transform:none;letter-spacing:0;margin-top:3px}
.sup-escura label .dica{color:var(--txt-inv-2)}


/* ── 7. FOCO ──────────────────────────────────────────────────────────────────
   Indigo. É controle, e foco é controle. Visível em teclado, sempre.
   ─────────────────────────────────────────────────────────────────────────── */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid var(--indigo);
  outline-offset:3px;
  border-radius:var(--r);
}
input:focus,textarea:focus,select:focus{
  outline:2px solid var(--indigo);
  outline-offset:-1px;
  border-color:var(--indigo);
}


/* ── 8. RÉGUA E FITA ──────────────────────────────────────────────────────────
   A assinatura do sistema. Régua em vez de cartão, hairline em vez de sombra.
   ─────────────────────────────────────────────────────────────────────────── */
.regua{border-top:var(--hair) solid var(--linha)}
.sup-escura .regua{border-top-color:var(--linha-inv)}

/* Coluna de régua — grade sem cartão, sem sombra */
.regua-col{border-right:var(--hair) solid var(--linha);padding:var(--s4) var(--s3) var(--s4) 0}
.regua-col:last-child{border-right:none}
.regua-col--ativa{box-shadow:inset 0 3px 0 var(--azul)}   /* marcador estrutural, não elevação */
.regua-col--tensa{box-shadow:inset 0 3px 0 var(--laranja)}

/* Fita / ledger — a linha do relatório */
.fita{border-top:var(--hair) solid var(--txt-1);padding-top:var(--s3);margin-top:var(--s4)}
.sup-escura .fita{border-top-color:var(--linha-inv)}
.fita__l{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 0;border-bottom:var(--hair) solid var(--fina);
  font-size:var(--t-cap);color:var(--txt-2);
}
.fita__l:last-child{border-bottom:none}
.fita__l b{
  font-family:var(--display);font-weight:700;
  font-size:var(--t-h3);color:var(--txt-1);
  letter-spacing:var(--tr-disp);font-variant-numeric:tabular-nums;
}
.sup-escura .fita__l{color:var(--txt-inv-2);border-bottom-color:var(--fina-inv)}
.sup-escura .fita__l b{color:var(--txt-inv-1)}


/* ── 9. VEREDITO ──────────────────────────────────────────────────────────────
   O laranja saiu do fundo. Superfície preta sempre, tensão marcada pela régua
   lateral e pelo número. Branco sobre laranja media 2,8:1 e reprovava.
   ─────────────────────────────────────────────────────────────────────────── */
.veredito{
  background:var(--sup-2);color:var(--txt-inv-1);
  border-radius:var(--r);border-left:3px solid var(--azul);
  padding:clamp(24px,5vw,34px);
}
.veredito[data-t="tensa"]{border-left-color:var(--laranja)}
.veredito[data-t="media"]{border-left-color:var(--txt-inv-2)}
.veredito b{
  font-family:var(--body);font-weight:700;
  font-size:var(--t-h3);letter-spacing:var(--tr-h2);
  display:block;margin-bottom:12px;color:var(--txt-inv-1);
}
.veredito[data-t="tensa"] b{color:var(--laranja)}   /* 6,1:1 sobre preto */
.veredito p{font-size:var(--t-cap);line-height:1.58;color:var(--txt-inv-2)}
.veredito p+p{margin-top:13px}

/* Número grande sobre a superfície escura */
.placar{background:var(--sup-2);color:var(--txt-inv-1);border-radius:var(--r);padding:clamp(30px,7vw,46px) clamp(24px,6vw,36px)}
.placar .num{color:var(--txt-inv-1)}
.placar[data-t="tensa"] .num{color:var(--laranja)}

/* Marca de estimativa. Laranja só sobre o escuro; no claro, vira preto. */
.est{
  display:block;margin-top:3px;
  font-size:var(--t-micro);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--tr-label);
  color:var(--txt-1);
}
.sup-escura .est,.placar .est{color:var(--laranja)}


/* ── 10. ESTADOS ─────────────────────────────────────────────────────────────
   Nenhum dos quatro arquivos tem estado de erro hoje. Passa a ter.
   ─────────────────────────────────────────────────────────────────────────── */
.erro{
  display:flex;gap:10px;align-items:flex-start;
  border-left:3px solid var(--laranja);
  padding:2px 0 2px 16px;margin-top:12px;
  font-size:var(--t-cap);color:var(--txt-1);max-width:52ch;
}
.erro[hidden]{display:none}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--laranja);border-width:2px}

.vazio{
  border-top:var(--hair) solid var(--linha);
  padding-top:var(--s3);
  font-size:var(--t-cap);color:var(--txt-3);max-width:44ch;
}


/* ── 11. BARRA FIXA ───────────────────────────────────────────────────────────
   Sólida. O backdrop-filter dos quatro arquivos era glassmorphism, §8.2.
   ─────────────────────────────────────────────────────────────────────────── */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--sup-2);
  border-top:var(--hair) solid var(--linha-inv);
  color:var(--txt-inv-1);
  padding:15px var(--gut) calc(15px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  transform:translateY(110%);
  transition:transform var(--lento) var(--ease);
}
.barra.on{transform:none}
.barra .label{color:var(--txt-inv-2)}
.barra b{font-family:var(--display);font-weight:700;font-size:var(--t-h3);letter-spacing:var(--tr-disp);font-variant-numeric:tabular-nums}


/* ── 12. LAYOUT ──────────────────────────────────────────────────────────── */
.faixa{max-width:680px;margin:0 auto}
.faixa--larga{max-width:1080px}
.faixa--app{max-width:520px}
section{padding:var(--secao) var(--gut)}


/* ── 13. PREFERÊNCIAS DO SISTEMA ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}
@media (prefers-contrast:more){
  :root{--txt-3:#3F4E5C;--txt-inv-2:#D2D8DE;--linha:#9BA6B0;--fina:#B9C3CB}
  input,textarea,select,.b--calmo,.b--quieto{border-color:var(--txt-2)}
}

@media print{
  body{background:#fff}
  .barra,.b,.b-txt,[data-print="fora"]{display:none!important}
  .sup-escura,.placar,.veredito{background:#fff;color:var(--txt-2);border:var(--hair) solid var(--txt-1)}
  .sup-escura .label,.sup-escura .kicker,.sup-escura .fita__l,.sup-escura .fita__l b,
  .placar .num,.veredito b,.veredito p{color:var(--txt-1)}
  .fita__l,.regua,.regua-col{border-color:var(--linha)}
}


/* ============================================================================
   CHECKLIST DE DEPLOY — Netlify Drop, sem build

   A pasta que você arrasta precisa ter, no mesmo nível:
     sistema.css
     index.html          (pagina-conta-fecha)
     apresentacao-como-eu-trabalho.html
     condutor-reuniao-diagnostico.html
     fonts/              ClashDisplay-Semibold.woff2
                         ClashDisplay-Bold.woff2
                         Satoshi-Regular.woff2
                         Satoshi-Medium.woff2
                         Satoshi-Bold.woff2

   Teste de 10 segundos antes de subir: abrir o HTML e conferir se o número
   grande está em Clash. Se estiver em Arial, a pasta fonts/ não veio junto.

   ---------------------------------------------------------------------------
   CONFORMIDADE — o que este arquivo garante

   §2  função semântica fixa · uma cor de acento expressiva por peça
   §3  Clash só em .num, h1 e .disp · frase em Satoshi · zero serifa
   §8.2 zero gradiente, glow, glassmorphism, sombra, bento decorativo
   §9  fundo off-white · raio 4px · hairline 1px · zero sombra · CTA indigo
   AA  todo par texto/fundo medido. Nada de opacity em texto.

   PENDÊNCIA PARA O MESTRE
   O laranja #F97316 mede 2,65:1 sobre o off-white — reprova como texto e
   como borda fina. Aqui ele foi restrito a: superfície escura, régua de 3px,
   e nada mais. Se você quiser laranja como texto sobre fundo claro, o mestre
   precisa de uma variante escura. Não inventei hex.
   ============================================================================ */