/* IA Shop — design tokens.
   Documentado em docs/RC3-DESIGN-SYSTEM.md. Nenhum valor de cor deve ser
   escrito direto em outro arquivo: sempre usar as variáveis abaixo. */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --brand-50:  #fff4f0;
  --brand-100: #ffe3d9;
  --brand-200: #ffc6b3;
  --brand-400: #f56b4c;
  --brand-500: #ee4d2d;  /* laranja principal, herdado da identidade Shopee */
  --brand-600: #d63e20;
  --brand-700: #b23417;

  --gold-50:  #fff8e5;
  --gold-200: #ffe6a3;
  --gold-400: #ffce3c;  /* dourado de apoio — acento, nunca área grande */
  --gold-600: #b07d05;

  /* --- Neutros ---------------------------------------------------------- */
  --ink-900: #1e120e;
  --ink-700: #4a3830;
  --ink-500: #7a655c;
  --ink-400: #9c8880;
  --ink-200: #d9cbc4;

  --line:      #efe4de;
  --line-soft: #f6efeb;
  --surface:   #ffffff;
  --surface-2: #fdfaf8;
  --canvas:    #fbf7f5;

  /* --- Semânticos ------------------------------------------------------- */
  --ok-500:     #148c4a;
  --ok-50:      #e9f7ef;
  --warn-500:   #b26a00;
  --warn-50:    #fff5e3;
  --danger-500: #c2321c;
  --danger-50:  #fdeeeb;
  --info-500:   #2563eb;
  --info-50:    #eef3ff;

  /* --- Tipografia ------------------------------------------------------- */
  /* Sem webfont externa: a preview não carrega fontes de terceiros. A
     personalidade vem da escala, do peso e do tracking, não do arquivo. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-display: 30px;
  --fs-h1: 24px;
  --fs-h2: 19px;
  --fs-h3: 16px;
  --fs-body: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-2xs: 11px;

  --track-tight: -0.02em;
  --track-display: -0.035em;
  --track-eyebrow: 0.09em;

  /* --- Espaçamento (base 4) --------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* --- Raio ------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* --- Sombra (muito sutil, sempre quente) ------------------------------ */
  --sh-1: 0 1px 2px rgba(58, 28, 16, 0.05);
  --sh-2: 0 2px 10px rgba(58, 28, 16, 0.06);
  --sh-3: 0 12px 34px rgba(58, 28, 16, 0.10);

  /* --- Layout ----------------------------------------------------------- */
  --sidebar-w: 244px;
  --content-max: 1180px;
  --topbar-h: 64px;
  --bottomnav-h: 62px;

  --focus: 0 0 0 3px var(--brand-200);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}