/* ═══════════════════════════════════════════════════════════════════════
   LORDS — DESIGN SYSTEM (Editorial)
   Fonte da verdade visual da marca — site · CRM · login · admin.
   Direção: escuro editorial · serifada · sem neon · ciano da marca + fill azul-claro.

   REGRA DE GOVERNANÇA: nenhuma página redefine token. Página só consome
   var(--token) e usa as receitas (.ds-*) abaixo. Mudança de identidade
   acontece AQUI e propaga sozinha.

   Uso na página:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="css/design-system.css">
   (as fontes são carregadas via @import abaixo; os preconnect só aceleram)
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Petrona:ital,wght@1,500;1,600&family=JetBrains+Mono:wght@500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════════
   1. TOKENS  (definitivos — travados)
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* superfícies */
  --carvao:#141516;
  --branco:#FFFFFF;
  --canvas:#E4E7EA;        /* cinza-claro neutro p/ áreas claras (CRM) */
  --card-top:#191A1C; --card-bot:#131315;   /* card carvão c/ gradiente sutil */
  --card-stroke:rgba(255,255,255,.08);

  /* marca */
  --ciano:#00D9FC;         /* acento vivo — traço, ícone, gráfico, link, ativo */
  --ciano-rgb:0,217,252;   /* mesmo ciano em RGB, p/ tints: rgba(var(--ciano-rgb),.x) */
  --azul-claro:#CAF3FF;    /* fill de destaque — botão primário, card-destaque */
  --ciano-ink:#0090a8;     /* ciano escurecido p/ texto sobre claro, se precisar */
  --atmos-rgb:255,255,255; /* luz de atmosfera (branco) p/ grid/glows/células: rgba(var(--atmos-rgb),.x) */

  /* texto sobre escuro */
  --on-dark:#F1F2F3; --on-dark-soft:#9A9EA4; --on-dark-mute:#686C72;
  /* texto sobre claro */
  --ink:#141516; --ink-soft:#585C62; --ink-mute:#888D94;

  /* semânticas (só com significado: ganho / perda / atenção) */
  --emerald:#35D08A; --rose:#FB7185; --amber:#FFC24B;
  --rose-rgb:251,113,133;  /* rose em RGB, p/ tints sóbrios: rgba(var(--rose-rgb),.x) */

  /* forma */
  --r:20px; --r-tile:13px; --r-pill:999px;
  --shadow:0 2px 6px rgba(20,25,35,.08),0 24px 44px -22px rgba(20,25,35,.32);

  /* fontes */
  --serif:'Petrona',Georgia,serif;
  --sans:'Inter',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. BASE
   ═══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  color:var(--on-dark);
  background:var(--carvao);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

::selection{ background:rgba(var(--ciano-rgb),.22); color:var(--branco); }

/* Foco de teclado visível (a11y) — em toda a marca */
:focus-visible{ outline:2px solid var(--ciano); outline-offset:2px; border-radius:6px; }

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

/* ═══════════════════════════════════════════════════════════════════════
   3. TIPOGRAFIA  (type scale — seção 2 do documento)
   Regra de ouro: o CORPO do título é SANS (Inter). A Petrona entra SÓ como
   acento em itálico (.ds-em) na palavra-chave, na cor #CAF3FF (azul-gelo, a MESMA
   var do botão primário: var(--azul-claro) — ficam amarrados). DECISÃO FINAL.
   Diferencia a FONTE (serif itálica) + o azul-gelo suave, sem voltar ao ciano
   saturado. Nunca headline toda serif. Ciano (#00D9FC) fica reservado SÓ a detalhes
   (ícones, linhas, hover, eyebrows) — NUNCA para acento nem botão.
   Número é SEMPRE mono (no CRM).
   ═══════════════════════════════════════════════════════════════════════ */

/* Display — corpo em sans; a palavra-chave recebe .ds-em (Petrona itálico) */
.ds-hero{ font-family:var(--sans); font-weight:400; font-size:clamp(2.5rem,5vw,4rem); line-height:1.05; letter-spacing:-.01em; margin:0; }
.ds-title-page{ font-family:var(--sans); font-weight:600; font-size:clamp(2rem,3.4vw,2.5rem); line-height:1.1; letter-spacing:-.01em; margin:0; }
.ds-title-section{ font-family:var(--sans); font-weight:600; font-size:1.375rem; line-height:1.2; margin:0; }   /* 22px */
.ds-headline{ font-family:var(--sans); font-weight:600; font-size:1.25rem; line-height:1.25; margin:0; }        /* 20px — empty-state */

/* Acento: palavra-chave em Petrona itálico, na cor #CAF3FF (azul-gelo — MESMA var
   do botão primário: var(--azul-claro)). Decisão final. Ciano nunca entra no acento. */
.ds-em{ font-family:var(--serif); font-style:italic; font-weight:inherit; color:var(--azul-claro); }

/* Corpo */
.ds-body{ font-family:var(--sans); font-weight:400; font-size:1rem; line-height:1.6; }
.ds-body-sm{ font-family:var(--sans); font-weight:400; font-size:.875rem; line-height:1.55; }

/* Label / eyebrow — CAIXA ALTA, letter-spacing .12em */
.ds-eyebrow,.ds-label{
  font-family:var(--sans); font-weight:600; font-size:.6875rem;  /* 11px */
  text-transform:uppercase; letter-spacing:.12em; color:var(--on-dark-soft);
}

/* Navegação */
.ds-nav{ font-family:var(--sans); font-weight:500; font-size:.90625rem; }  /* 14.5px */

/* Número / métrica / data — sempre mono, tabular */
.ds-num{ font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* Cor de texto sobre escuro (utilitários) */
.ds-txt-soft{ color:var(--on-dark-soft); }
.ds-txt-mute{ color:var(--on-dark-mute); }

/* ═══════════════════════════════════════════════════════════════════════
   4. COMPONENTES  (receitas — seção 4 do documento)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Botões ── */
.ds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-weight:600; font-size:.875rem; line-height:1;
  padding:.75rem 1.375rem; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  text-decoration:none;
}
.ds-btn:hover{ text-decoration:none; }
.ds-btn:active{ transform:translateY(1px); }

/* Primário — fill azul-claro, texto carvão. UM por vista (o "Get started"). */
.ds-btn--primary{ background:var(--azul-claro); color:var(--ink); }
.ds-btn--primary:hover{ background:#dcf7ff; }

/* Secundário — contorno claro, texto claro, fundo transparente (o "Learn more"). */
.ds-btn--secondary{ background:transparent; color:var(--on-dark); border-color:rgba(255,255,255,.28); }
.ds-btn--secondary:hover{ border-color:var(--on-dark); background:rgba(255,255,255,.04); }

/* ── Card ── carvão com gradiente sutil, raio 20px, sombra pra flutuar. Sem neon. */
.ds-card{
  background:linear-gradient(180deg,var(--card-top) 0%,var(--card-bot) 100%);
  border:1px solid var(--card-stroke);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:1.25rem 1.5rem;
}

/* ── Tile de ícone tintado (KPI / quick-action) ── */
.ds-icon-tile{
  width:44px; height:44px; border-radius:var(--r-tile);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.25rem;
  background:rgba(var(--ciano-rgb),.10); color:var(--ciano);   /* ciano por padrão; sobrescrever p/ semântica */
}

/* ── KPI card (CRM) ── carvão · ícone tintado · label caixa-alta · número mono · sparkline só onde há série real */
.ds-kpi{ /* estende .ds-card */ padding:1rem 1.125rem; }
.ds-kpi__label{ /* usar junto de .ds-label */ margin-bottom:.5rem; }
.ds-kpi__value{ font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums; font-size:1.75rem; line-height:1; letter-spacing:-.02em; }

/* ── Chip / pill de acento (estado ativo, filtro) ── contorno ciano, sem glow */
.ds-chip{
  display:inline-flex; align-items:center; gap:.375rem;
  padding:.375rem .875rem; border-radius:var(--r-pill);
  font-family:var(--sans); font-size:.75rem; font-weight:600;
  color:var(--on-dark-soft); border:1px solid var(--card-stroke); background:transparent;
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.ds-chip:hover{ color:var(--on-dark); border-color:rgba(255,255,255,.2); }
.ds-chip.is-active{ color:var(--ciano); border-color:rgba(var(--ciano-rgb),.5); background:rgba(var(--ciano-rgb),.08); }

/* ── Fio de acento (traço fino ciano) — detalhe editorial, contido, sem brilho ── */
.ds-rule{ height:1px; border:0; background:linear-gradient(90deg,transparent,rgba(var(--ciano-rgb),.35),transparent); }

/* ═══════════════════════════════════════════════════════════════════════
   5. ATMOSFERA — camadas de fundo reutilizáveis (luz/textura BRANCA, sem cor)
   Uso: <div class="ds-grid-bg" aria-hidden="true"></div> e/ou
        <div class="ds-hero-glow" aria-hidden="true"></div> dentro de uma
   seção com position:relative e overflow:hidden. O conteúdo deve ter
   position:relative; z-index:1 pra ficar por cima. Sem neon — só branco.
   ═══════════════════════════════════════════════════════════════════════ */
.ds-hero-glow,
.ds-grid-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* Glow ambiente — DOIS holofotes brancos ancorados nas quinas de cima
   (esquerda + direita), desvanecendo em direção ao centro/baixo. Sem cor. */
.ds-hero-glow{
  background:
    radial-gradient(46% 52% at 0% 0%,   rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 34%, transparent 62%),
    radial-gradient(46% 52% at 100% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 34%, transparent 62%);
}

/* Grid blueprint — linhas brancas finas (~.05); máscara vertical concentra o
   grid na METADE INFERIOR (some no topo, cheio embaixo) pra fazer a ponte
   visual botões → mockup. */
.ds-grid-bg{
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 64px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 6%, rgba(0,0,0,.5) 44%, #000 100%);
          mask-image:linear-gradient(to bottom, transparent 6%, rgba(0,0,0,.5) 44%, #000 100%);
}

/* Canvas do grid animado ("quadrados acendendo") — base compartilhada hero+login.
   Trava 3 (Chatwoot): z-index baixo + pointer-events:none, atrás do conteúdo.
   SEM máscara aqui (a exclusão do texto é no JS) — evita bloco escuro (trava 4).
   A animação vive em js/animated-grid.js. */
canvas.ds-grid-cells{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}