@charset "UTF-8";
/* Design tokens — Sublim.art.br. Fonte: design_handoff_sublim/README.md. Não editar valores sem atualizar o README. */
:root {
  /* tinta — escalas */
  --sb-ink-50: #F6F6F7;
  --sb-ink-100: #ECECEE;
  --sb-ink-200: #D9D9DD;
  --sb-ink-300: #B9B9C0;
  --sb-ink-400: #8C8C96;
  --sb-ink-500: #64646E;
  --sb-ink-600: #47474F;
  --sb-ink-700: #333338;
  --sb-ink-800: #232326;
  --sb-ink-900: #17171A;
  --sb-ink-950: #0D0D0F;
  /* ciano */
  --sb-cyan-50: #E6F7FE;
  --sb-cyan-100: #C7EEFD;
  --sb-cyan-200: #8FDDFB;
  --sb-cyan-300: #4FC8F5;
  --sb-cyan-400: #00AEEF;
  --sb-cyan-500: #0091C9;
  --sb-cyan-600: #0076A5;
  --sb-cyan-700: #005C81;
  --sb-cyan-800: #04455F;
  --sb-cyan-900: #062F41;
  /* magenta */
  --sb-magenta-50: #FFE9F3;
  --sb-magenta-100: #FFCCE3;
  --sb-magenta-200: #FE9AC7;
  --sb-magenta-300: #FB5CA5;
  --sb-magenta-400: #F4067E;
  --sb-magenta-500: #D2006B;
  --sb-magenta-600: #AE0058;
  --sb-magenta-700: #8A0046;
  /* amarelo */
  --sb-yellow-50: #FFF9E0;
  --sb-yellow-100: #FFF0B3;
  --sb-yellow-200: #FFE470;
  --sb-yellow-300: #FFD400;
  --sb-yellow-400: #E8BF00;
  --sb-yellow-700: #7A6400;
  --sb-yellow-800: #5A4900;
  /* laranja */
  --sb-orange-50: #FFF1E0;
  --sb-orange-100: #FFDDB3;
  --sb-orange-300: #F98B00;
  --sb-orange-500: #B96500;
  /* papéis semânticos */
  --sb-action: var(--sb-magenta-500); /* comprar */
  --sb-action-hover: #AE0058;
  --sb-custom: var(--sb-cyan-600); /* personalizar */
  --sb-custom-hover: #005C81;
  --sb-promo: var(--sb-yellow-300);
  --sb-link: var(--sb-cyan-600);
  --sb-link-hover: #005C81;
  --sb-focus: 0 0 0 3px rgb(0 174 239 / .45);
  --sb-success: #0E7C4A;
  --sb-success-bg: #ECFDF3;
  --sb-success-bd: #C7F0D8;
  --sb-warning: #B96500;
  --sb-danger: #C0261F;
  --sb-danger-bg: #FDECEB;
  --sb-danger-bd: #F5C9C6;
  /* tipografia */
  --sb-font: "Archivo", Helvetica, sans-serif;
  /* espaço — base 4 */
  --sb-1: 4px;
  --sb-2: 8px;
  --sb-3: 12px;
  --sb-4: 16px;
  --sb-6: 24px;
  --sb-8: 32px;
  --sb-12: 48px;
  --sb-16: 64px;
  --sb-24: 96px;
  /* raio */
  --sb-r-sm: 4px; /* tag, thumb */
  --sb-r-md: 8px; /* botão, input */
  --sb-r-lg: 14px; /* card, painel */
  --sb-r-xl: 16px; /* painel grande */
  --sb-r-pill: 999px;
  /* elevação */
  --sb-shadow-sm: 0 2px 8px rgb(23 23 26 / .08); /* hover de card */
  --sb-shadow-lg: 0 12px 32px rgb(23 23 26 / .14); /* dropdown, mini-cart */
  /* grid e container */
  --sb-container-max: 1280px;
  --sb-gutter: 40px;
}

@media (max-width: 767px) {
  :root {
    --sb-gutter: 20px;
  }
}