/* =============================================================
   ANGLIS — Design tokens v1.0 (fonte da verdade)
   Conceito: "O Ponto de Calma" — ambiente quente e silencioso
   onde a tecnologia só aparece como pontos de luz azul.
   Qualquer divergência destes valores em outra peça é bug.
   ============================================================= */

/* ---- Fontes (self-hosted) ----------------------------------- */
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Fundos — off-white QUENTE (lar/linho, não clínica) ---- */
  --papel:        #FAF8F5;
  --papel-2:      #F3F0EA;
  --superficie:   #FFFFFF;
  --borda:        #E9E5DE;
  --borda-forte:  #D8D3CA;

  /* ---- Tinta ---- */
  --tinta:        #1B1D22;
  --tinta-2:      #565B63;
  --tinta-3:      #696E78;  /* ≥4,5:1 sobre papel e papel-2 — AA para texto pequeno */

  /* ---- ESTADO ESTÁVEL = cor primária da marca ---- */
  --azul:         #2F6BE4;
  --azul-hover:   #2557C2;
  --azul-wash:    #EAF1FD;
  --azul-borda:   #C7DAFA;
  --azul-glow:    rgba(47, 107, 228, .30);

  /* ---- ESTADO ATENÇÃO — âmbar mel ---- */
  --ambar:        #E8A33B;
  --ambar-wash:   #FBF2E2;
  --ambar-texto:  #8A5B14;
  --ambar-glow:   rgba(232, 163, 59, .35);

  /* ---- ESTADO EMERGÊNCIA — vermelho terroso ---- */
  --vermelho:        #E25C4B;
  --vermelho-wash:   #FBEBE7;
  --vermelho-texto:  #A93B2D;
  --vermelho-glow:   rgba(226, 92, 75, .35);

  /* ---- Utilitário (só dashboard) ---- */
  --verde:        #2E9E6B;
  --verde-wash:   #E6F5EE;
  --verde-texto:  #1F7E52;  /* único verde permitido como TEXTO pequeno */

  /* ---- Tema escuro (manifesto, chat do Cubi) ---- */
  --noite:          #0F1116;
  --noite-2:        #151821;
  --noite-3:        #1C202B;
  --borda-noite:    #272C38;
  --texto-noite:    #F1F2F4;
  --texto-noite-2:  #A6ABB5;
  --azul-noite:     #7AA5FF;
  --ambar-noite:    #F6BE6B;
  --vermelho-noite: #FF8A77;
  --cubi-ciano:     #7FE3FF; /* exclusivo do rosto do Cubi — nunca em UI */

  /* ---- Tipografia ---- */
  --fonte-display: "General Sans", "Inter", system-ui, sans-serif;
  --fonte-texto:   "Inter", system-ui, sans-serif;

  --fs-hero:    clamp(2.75rem, 6.5vw, 5rem);   /* 600 | lh 1.05 | ls -.02em  */
  --fs-h2:      clamp(2.125rem, 4vw, 3rem);    /* 600 | lh 1.15 | ls -.015em */
  --fs-h3:      1.75rem;
  --fs-h4:      1.375rem;
  --fs-lead:    1.25rem;                        /* Inter 400 | lh 1.6  */
  --fs-body:    1.0625rem;                      /* Inter 400 | lh 1.65 */
  --fs-btn:     .9375rem;                       /* Inter 600 | sentence case */
  --fs-small:   .875rem;
  --fs-eyebrow: .8125rem;                       /* ÚNICO uppercase do sistema */

  /* ---- Raios ---- */
  --r-xs: 8px;  --r-sm: 12px;  --r-md: 16px;  --r-lg: 24px;
  --r-xl: 32px; --r-2xl: 40px; --r-pill: 999px;

  /* ---- Sombras (tingidas de tinta) ---- */
  --sombra-1: 0 1px 2px rgba(27, 29, 34, .05), 0 2px 8px rgba(27, 29, 34, .04);
  --sombra-2: 0 4px 12px rgba(27, 29, 34, .06), 0 16px 40px rgba(27, 29, 34, .07);
  --sombra-azul: 0 0 0 1px rgba(47, 107, 228, .10), 0 8px 40px var(--azul-glow);

  /* ---- Espaçamento ---- */
  --secao:       clamp(80px, 10vw, 128px);
  --container:   1200px;
  --card-pad:    32px;
  --card-pad-lg: 48px;
  --gap:         24px;

  /* ---- Motion — "calma operacional" ---- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-padrao: cubic-bezier(.4, 0, .2, 1);
  --t-micro: 160ms;  --t-ui: 240ms;  --t-reveal: 600ms;  --t-hero: 800ms;
  /* pulso do semáforo: azul 3s · âmbar 1,6s · vermelho 0,9s */
}

/* ---- Base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: 600;
  margin: 0;
}
h1 { font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2);   line-height: 1.15; letter-spacing: -.015em; }
h3 { font-size: var(--fs-h3);   line-height: 1.25; letter-spacing: -.01em; }
h4 { font-size: var(--fs-h4);   line-height: 1.3; }

p { margin: 0; }

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-hover); }

img { max-width: 100%; display: block; }

.metrica, .tabular { font-variant-numeric: tabular-nums; }

/* ---- Componentes-base ---------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--azul);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--r-pill);
  padding: 14px 28px;
  font-family: var(--fonte-texto);
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-ui) var(--ease-padrao),
              transform var(--t-ui) var(--ease-padrao),
              box-shadow var(--t-ui) var(--ease-padrao),
              border-color var(--t-ui) var(--ease-padrao);
}
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-hover); transform: translateY(-1px); box-shadow: var(--sombra-azul); color: #fff; }
.btn-secundario { background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte); }
.btn-secundario:hover { border-color: var(--tinta-3); transform: translateY(-1px); color: var(--tinta); }

.badge-estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: .8125rem;
  font-weight: 500;
}
.badge-estado .ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.badge-azul     { background: var(--azul-wash);     color: var(--azul-hover); }
.badge-azul .ponto     { background: var(--azul); }
.badge-ambar    { background: var(--ambar-wash);    color: var(--ambar-texto); }
.badge-ambar .ponto    { background: var(--ambar); }
.badge-vermelho { background: var(--vermelho-wash); color: var(--vermelho-texto); }
.badge-vermelho .ponto { background: var(--vermelho); }

/* pulsos do semáforo — a frequência É a mensagem */
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pulso-azul     { animation: pulso 3s   var(--ease-padrao) infinite; }
.pulso-ambar    { animation: pulso 1.6s var(--ease-padrao) infinite; }
.pulso-vermelho { animation: pulso .9s  var(--ease-padrao) infinite; }

/* ---- Acessibilidade ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}