/* ==========================================================================
   TOKENS - Design system da Supra Equipamentos
   Paleta derivada do logotipo novo (ciano + grafite), amostrada do arquivo
   entregue pelo cliente. Substitui o amarelo da identidade anterior.
   ========================================================================== */

:root {
  /* --- Cor de marca (ciano do logotipo) ---
     O ciano cheio tem 3,09:1 sobre branco: serve para preenchimento e para
     texto grande, mas reprova em AA no texto pequeno. Por isso existe o
     --brand-text, escurecido, para link e rótulo. */
  --brand:        #00a0c0;   /* CTA, preenchimento, destaques */
  --brand-strong: #007e99;   /* hover */
  --brand-text:   #006070;   /* texto pequeno e link sobre fundo claro (7,2:1) */
  --brand-soft:   #e2f3f8;   /* fundo tint */
  --brand-ring:   rgba(0, 160, 192, .45);

  /* --- Tinta / neutros --- */
  --ink-900: #0d0e11;  /* texto principal, seções escuras */
  --ink-800: #16181d;
  --ink-700: #2b2f37;  /* texto forte */
  --ink-500: #5b616e;  /* texto secundário */
  --ink-400: #8b909b;  /* muted */

  /* --- Superfícies --- */
  --surface:   #ffffff;
  --surface-2: #f6f7f9;  /* seções alternadas */
  --surface-3: #eef0f4;
  --line:      #e6e8ee;  /* bordas */
  --line-2:    #d9dce4;

  /* --- Utilidade --- */
  --wa:        #25d366;  /* WhatsApp */
  --wa-strong: #1db756;

  /* --- Tipografia --- */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Sora', var(--font-sans);

  /* --- Raio --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* --- Sombras (discretas) --- */
  --sh-xs: 0 1px 2px rgba(16, 20, 30, .05);
  --sh-sm: 0 4px 14px rgba(16, 20, 30, .06);
  --sh-md: 0 12px 30px rgba(16, 20, 30, .08);
  --sh-lg: 0 26px 60px rgba(16, 20, 30, .12);
  --sh-brand: 0 12px 28px rgba(0, 150, 180, .35);

  /* --- Layout --- */
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(64px, 9vw, 120px);

  /* --- Transições --- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .18s var(--ease);
  --t: .32s var(--ease);
}