/* ==========================================================================
   Sele Systems - design tokens (fonte unica de cor, tipografia e espaco)
   NAO redefinir estes valores em outros arquivos CSS: consumir via var(--ss-*).
   Guia de marca: docs/IDENTIDADE-VISUAL.md
   ========================================================================== */

:root {
  --ss-bg: #070A12;            /* fundo principal */
  --ss-bg-2: #0D1220;          /* fundo de secao alternada */
  --ss-surface: #111828;       /* cartao */
  --ss-surface-2: #182036;     /* cartao hover / elevado */
  --ss-line: rgba(255,255,255,.08);
  --ss-line-2: rgba(255,255,255,.16);
  --ss-text: #EEF2FF;
  --ss-text-2: #A7B0C8;
  --ss-text-3: #6F7A96;
  --ss-mint: #4DF0C4;          /* acento primario */
  --ss-violet: #7B6CFF;        /* acento secundario */
  --ss-amber: #FFB547;         /* destaque / aviso */
  --ss-rose: #FF5C7A;          /* erro */
  --ss-grad: linear-gradient(135deg, #4DF0C4 0%, #7B6CFF 100%);
  --ss-glow-mint: rgba(77,240,196,.35);
  --ss-glow-violet: rgba(123,108,255,.35);
  --ss-font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ss-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ss-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ss-radius-s: 8px;
  --ss-radius-m: 16px;
  --ss-radius-l: 28px;
  --ss-shadow: 0 20px 60px rgba(0,0,0,.45);
  --ss-container: 1200px;
  --ss-pad: 24px;
  --ss-ease: cubic-bezier(.2,.8,.2,1);
}

/* --------------------------------------------------------------------------
   Reset minimo
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body { margin: 0; }

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

/* --------------------------------------------------------------------------
   Utilitarias de marca
   -------------------------------------------------------------------------- */

/* Texto com o gradiente menta -> violeta. Usar somente em trechos curtos
   (titulo, numero, palavra de destaque) - nunca em bloco de leitura. */
.ss-grad-text {
  background: var(--ss-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Conteudo somente para leitor de tela (rotulos, titulos de secao ocultos). */
.ss-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}