/* Tokens da MK6. Vermelho e tinta vêm da logo nova (Logotipo_Versão 2 33.svg);
   o preto com brilho vermelho vem da proposta comercial deles (MK6 Journey).
   Fundo claro, linhas e raios base vêm do design system do CRM. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --red: #D60F1E;
  --red-700: #B00C18;
  --red-dark: #8F0000;
  --brasa: #FF4D57;          /* vermelho para texto sobre preto (contraste) */
  --red-050: #FEF0F2;
  --grad-botao: linear-gradient(135deg, #E8222F 0%, #B00C18 100%);

  --preto: #07090C;          /* fundo das dobras escuras */
  --ink: #10181E;            /* texto sobre claro (tinta da logo) */
  --ink-2: #3A3B45;
  --muted: #6B7280;
  --faint: #9CA3AF;
  --claro-1: rgba(255, 255, 255, .72);   /* texto secundário sobre preto */
  --claro-2: rgba(255, 255, 255, .5);
  --linha-escura: rgba(255, 255, 255, .1);

  --bg: #F2F4F5;
  --surface: #FFFFFF;
  --line: #E9EBEE;
  --line-strong: #DCDFE3;

  /* brilho vermelho em degradê sobre o preto, como a nebulosa da proposta */
  --brilho:
    radial-gradient(70% 90% at 100% 0%, rgba(214, 15, 30, .42) 0%, rgba(143, 0, 0, .16) 45%, transparent 72%),
    radial-gradient(55% 75% at 0% 100%, rgba(143, 0, 0, .38) 0%, transparent 70%);

  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --chanfro: 44px;           /* o corte diagonal do MK6 nos cantos */
  --corte: 72px;             /* altura da diagonal entre dobras */

  --shadow-sm: 0 1px 2px rgba(16, 24, 30, .04), 0 2px 6px rgba(16, 24, 30, .05);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .35);

  --sans: "Plus Jakarta Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
  --shell: 1200px;
  --gutter: 24px;
  --header: 68px;
  --pad: 112px;
}

@media (max-width: 860px) {
  :root { --corte: 40px; --pad: 80px; --chanfro: 32px; }
}
@media (max-width: 620px) {
  :root { --gutter: 16px; --header: 60px; --pad: 64px; --corte: 28px; --chanfro: 24px; }
}