/* ==========================================================================
   BotFriends — Design Tokens
   --------------------------------------------------------------------------
   Este é o ÚNICO arquivo que precisa ser alterado para mudar a identidade
   visual (cores, tipografia, espaçamento, raios, sombras) de todo o site.
   Qualquer página nova (/entrar, /cadastro, /dashboard, /docs) deve importar
   este arquivo antes de qualquer outro CSS.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- MARCA */
  --brand-700: #3b46c4;
  --brand-600: #4a56e0;
  --brand-500: #5865f2; /* PRIMARY / BOT BLUE — cor principal da marca */
  --brand-400: #7c83ff; /* SECONDARY BLUE */
  --brand-300: #a3a8ff;

  /* Superfícies tingidas de marca (usadas em pills, ícones, hovers) */
  --brand-tint-06: rgba(88, 101, 242, 0.06);
  --brand-tint-10: rgba(88, 101, 242, 0.1);
  --brand-tint-16: rgba(88, 101, 242, 0.16);
  --brand-tint-28: rgba(88, 101, 242, 0.28);
  --brand-tint-55: rgba(88, 101, 242, 0.55);

  /* ------------------------------------------------------------- DESTAQUE */
  /* Coral é ACENTO. Nunca deve virar cor dominante de uma seção. */
  --accent-500: #ff6b81;
  --accent-tint-12: rgba(255, 107, 129, 0.12);

  /* ------------------------------------------------------- SEMÂNTICO (UI) */
  --status-online: #3ddc97; /* apenas indicadores de estado */
  --status-online-tint: rgba(61, 220, 151, 0.14);

  /* ----------------------------------------------------------- SUPERFÍCIES */
  --bg: #0b1020; /* BACKGROUND / MIDNIGHT */
  --bg-raised: #0e142a; /* faixas e blocos levemente acima do fundo */
  --surface: #111936; /* CARD / DEEP NAVY */
  --surface-hover: #16204a;
  --surface-inset: #0a0f1f; /* interior de terminais / blocos de código */

  /* ------------------------------------------------------------ TIPOGRAFIA */
  --text: #f8faff; /* TEXT PRIMARY */
  --text-muted: #9ba4c0; /* TEXT SECONDARY */
  --text-subtle: #7e88a8; /* metadados e legendas (contraste AA mantido) */

  /* --------------------------------------------------------------- BORDAS */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-brand: var(--brand-tint-55);

  /* --------------------------------------------------------------- FONTES */
  --font-sans: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo",
    "Consolas", "Liberation Mono", monospace;

  /* Escala tipográfica fluida (mobile-first, sem media queries) */
  --fs-display: clamp(2.4rem, 1.5rem + 3.6vw, 3.55rem);
  --fs-h2: clamp(1.75rem, 1.18rem + 2.2vw, 2.7rem);
  --fs-h3: clamp(1.05rem, 1rem + 0.25vw, 1.18rem);
  --fs-lead: clamp(1.02rem, 0.96rem + 0.35vw, 1.19rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem; /* 15px */
  --fs-xs: 0.8125rem; /* 13px */
  --fs-eyebrow: 0.75rem; /* 12px */

  --lh-tight: 1.06;
  --lh-heading: 1.15;
  --lh-body: 1.65;

  --tracking-display: -0.033em;
  --tracking-heading: -0.024em;
  --tracking-eyebrow: 0.14em;

  /* ------------------------------------------------------------ ESPAÇAMENTO */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5rem;

  /* Ritmo vertical das seções */
  --section-y: clamp(4.25rem, 8vw, 7.5rem);

  /* ------------------------------------------------------------- ESTRUTURA */
  --container: 1180px;
  --container-pad: clamp(1.25rem, 4.5vw, 2rem);
  --header-h: 4rem;

  /* ----------------------------------------------------------------- RAIOS */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* --------------------------------------------------------------- SOMBRAS */
  /* Usadas com parcimônia: profundidade vem de contraste, não de sombra. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 28px -14px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 32px 64px -28px rgba(0, 0, 0, 0.85);
  --shadow-brand: 0 24px 60px -30px rgba(88, 101, 242, 0.65);

  /* ------------------------------------------------------------- MOVIMENTO */
  --ease: cubic-bezier(0.22, 0.68, 0.34, 1);
  --dur-fast: 130ms;
  --dur: 200ms;
  --dur-slow: 480ms;

  /* ------------------------------------------------------------------ FOCO */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-400);
}