/* Nex Store · tokens do design system
   Toda cor, medida e sombra do site vem daqui. Para mudar a identidade, edite só este arquivo.

   Filosofia das cores
   - Azul-escuro "noite" (--ink): confiança e estrutura. Texto, cabeçalho, rodapé, campanhas e o botão
     principal. É a cor de quem responde pela compra do começo ao fim.
   - Azul-bebê "céu" (--sky): calma e clareza. Campos onde o produto aparece, faixas e destaques suaves.
     Diz ao cliente que está tudo explicado antes de pagar.
   - Vermelho "sinal" (--red): atenção com motivo. Só aparece quando há algo a ganhar ou a corrigir:
     economia de kit, oferta, frete grátis, contador do carrinho e erros. Nunca é enfeite; se tudo
     fosse vermelho, nada chamaria atenção.
   Proporção de referência: muito branco e céu, noite na estrutura, sinal em pontos contados. */
:root {
  /* Noite: azul-escuro */
  --ink: #0B1B3F;            /* texto, estrutura, campanhas */
  --ink-2: #13285A;          /* superfícies escuras secundárias */
  --ink-3: #26407A;          /* bordas e divisores no escuro */
  --blue: #1F46C8;           /* links, foco e interação sobre fundo claro */
  --blue-strong: #16349E;
  --blue-soft: #E8F0FF;

  /* Céu: azul-bebê */
  --sky: #BFE0FF;            /* ação principal sobre fundo escuro, campos de produto */
  --sky-strong: #A3D2FF;
  --sky-soft: #E6F2FF;       /* faixas e campos claros */
  --sky-wash: #F2F8FF;       /* fundo de seção levemente azul */
  --sky-ink: #24508F;        /* texto secundário sobre céu */

  /* Sinal: vermelho */
  --red: #D92B24;            /* economia, oferta, frete grátis, carrinho e erro (4,9:1 sobre branco) */
  --red-strong: #B71F19;
  --red-soft: #FFECEA;

  /* Estados de pedido e disponibilidade: sempre acompanhados de texto, nunca só cor */
  --green: #0B7A53;
  --green-soft: #E4F4EC;
  --amber: #9A5B00;
  --amber-soft: #FFF3DC;

  /* Superfícies e texto */
  --bg: #F5F9FE;
  --surface: #FFFFFF;
  --surface-2: #EAF2FB;
  --text: #0B1B3F;
  --text-2: #45567A;         /* contraste AA sobre --bg */
  --text-3: #5B6C92;
  --line: #DCE6F2;
  --line-2: #C3D2E5;
  --on-dark: #EAF2FF;
  --on-dark-2: #A9BFE3;
  --product-bg: linear-gradient(165deg, #F1F5FA 0%, #E3EAF3 100%);

  /* Tipografia */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-md: 1rem;        /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: clamp(1.625rem, 2.6vw, 2.25rem);
  --fs-3xl: clamp(2rem, 3.6vw, 2.875rem);
  --fs-hero: clamp(2.5rem, 4.6vw, 3.75rem);

  /* Espaço (base 4 px) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 96px;

  /* Forma e profundidade */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11, 27, 63, .06);
  --shadow-2: 0 2px 6px rgba(11, 27, 63, .05), 0 12px 32px rgba(11, 27, 63, .08);
  --shadow-3: 0 8px 20px rgba(11, 27, 63, .10), 0 28px 64px rgba(11, 27, 63, .16);
  --ring: 0 0 0 3px rgba(31, 70, 200, .24);

  /* Layout e movimento */
  --container: 1280px;
  --gutter: 16px;
  --tap: 44px;
  --header-h: 120px;
  --ease: cubic-bezier(.16, 1, .3, 1);   /* desaceleração exponencial: chegadas firmes */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --angle: 28.81deg;         /* inclinação do símbolo, usada como motivo gráfico */
}

@media (min-width: 900px) {
  :root { --gutter: 32px; --header-h: 132px; }
}