/* =============================================================================
   SNDesk Design Tokens
   Arquivo de tokens da identidade visual: tipografia, cores, raios e sombras.
   Carregue este arquivo antes do app.css.
   ============================================================================= */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&family=Source+Serif+4:opsz,wght@8..60,400;500;600;700;800;900&display=swap");


:root {
  /* ===========================================================================
     Tipografia
     =========================================================================== */
  --snd-font-title: "Source Serif 4", serif;
  --snd-font-body: "DM Sans", sans-serif;

  /* Uso em títulos de funcionalidades e cards */
  --snd-font-titlefunc: var(--snd-font-title);

  /* Peso de fonte para headings */
  --snd-fw-extrabold: 800;
  --snd-fw-black: 900;

  /* Tracking */
  --snd-tracking-tight: -0.01em;
  --snd-letter-spacing-tight: -0.01em;

  /* ===========================================================================
     Layout base
     =========================================================================== */
  --snd-header-h: 84px;

  /* ===========================================================================
     Raios, bordas e sombras
     =========================================================================== */
  --snd-radius-sm: 10px;
  --snd-radius-md: 16px;
  --snd-radius-lg: 20px;


  --snd-radius-button: 12px;

  --snd-border: 1px solid rgba(44, 62, 80, 0.10);
  --snd-shadow: 0 10px 30px rgba(44, 62, 80, 0.10);

  /* ===========================================================================
     Paleta da marca
     =========================================================================== */
  --snd-color-primary: #0F7ADE;
  --snd-color-secondary: #50CDF9;

  /* Alternativos para gradientes horizontais */
  --snd-color-blue-light: var(--snd-color-secondary);
  --snd-color-blue-dark: var(--snd-color-primary);

  /* Tom mais profundo para detalhes e contrastes */
  --snd-blue-deep: #0B5DA8;

  /* Neutros */
  --snd-color-ink: #2C3E50;
  --snd-color-muted: #737F9B;
  --snd-color-gray-1: #99ACC6;
  --snd-color-gray-2: #C0CFE2;
  --snd-color-surface: #E7F3FE;
  --snd-color-bg: #f5f5f7;

  /* ===========================================================================
     Cores semânticas
     =========================================================================== */
  --snd-color-probl: #ff0707;
  --snd-color-warn: #FAAF3C;
  --snd-color-attn: #F2D65F;
  --snd-color-success: #23AA58;
  --snd-color-success-2: #8BC541;
  --snd-color-purple: #8557CE;
  --snd-color-pink: #EA71B9;

  /* ===========================================================================
     Gradientes
     =========================================================================== */
  --snd-btn-gradient-vertical: linear-gradient(
    180deg,
    var(--snd-color-secondary) 0%,
    var(--snd-color-primary) 100%
  );

  --snd-btn-gradient-horizontal: linear-gradient(
    90deg,
    var(--snd-color-blue-light) 0%,
    var(--snd-color-blue-dark) 100%
  );
}