/* ============================================================
   TOKENS E-9 — Design System VendasParaguai
   3 camadas: primitivo → semântico → componente
   Base empírica: capturas E-8/E-8B (escala 4px, raios 4-8px,
   página neutra com marca só em header/CTA, números tabulares)
   Duas direções de identidade para escolha (Erika + Renan):
     .dir-a  → DIREÇÃO A "Racucco Evoluída"  (terracota/verde/creme, PT)
     .dir-b  → DIREÇÃO B "VendasParaguai Internacional" (ES primeiro)
   ============================================================ */

/* ---------- CAMADA 1 · PRIMITIVOS (compartilhados) ---------- */
:root {
  /* espaço — base 4px (padrão dos gigantes, E-8) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* raios — faixa 4-8px confirmada na captura */
  --r-s: 4px; --r-m: 8px; --r-l: 12px; --r-pill: 999px;

  /* tipografia — escala */
  --fs-xs: 11px; --fs-s: 13px; --fs-base: 15px; --fs-m: 17px;
  --fs-l: 20px;  --fs-xl: 24px; --fs-xxl: 30px;
  --lh-tight: 1.2; --lh-base: 1.5;
  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;

  /* toque e foco — acessibilidade (blueprint §6) */
  --tap-min: 44px;
  --focus-w: 3px;

  /* sombra e movimento */
  --shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-raise: 0 4px 12px rgba(0,0,0,.12);
  --ease: 160ms ease;
}

/* ---------- CAMADA 2 · SEMÂNTICOS — DIREÇÃO A ----------
   "Racucco Evoluída": evolui a paleta atual da marca
   (terracota #c8451a · verde #2e6b30 · creme #f4f1ea · Inter) */
.dir-a {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --brand:        #c8451a;  /* terracota — primária */
  --brand-strong: #a53712;  /* hover/active */
  --brand-soft:   #fbe9e2;  /* tint de fundo */
  --brand-ink:    #ffffff;  /* texto sobre a primária */

  --bg:      #f4f1ea;       /* creme — fundo de página */
  --surface: #ffffff;       /* cartões e campos */
  --ink:     #141414;       /* texto principal */
  --muted:   #5c5952;       /* texto secundário */
  --line:    #e2ddd2;       /* bordas e divisores */

  --ok:      #2e6b30;       /* verde = disponível (texto AA) */
  --ok-bg:   #e6efe4;
  --warn:    #8a5a00;       /* âmbar = atenção (texto AA) */
  --warn-bg: #fdf3d9;
  --err:     #b3261e;       /* vermelho = só erro */
  --err-bg:  #fbe9e8;

  --focus-ring: rgba(200,69,26,.35);
}

/* ---------- CAMADA 2 · SEMÂNTICOS — DIREÇÃO B ----------
   "VendasParaguai Internacional": proposta nova, ES primeiro.
   Azul-guaraní (confiança cross-border) + sol âmbar; neutros frios. */
.dir-b {
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --brand:        #0b5bd3;  /* azul guaraní — primária */
  --brand-strong: #0946a3;  /* hover/active */
  --brand-soft:   #e7effc;  /* tint de fundo */
  --brand-ink:    #ffffff;

  --bg:      #f7f8fa;       /* cinza-azulado quase branco */
  --surface: #ffffff;
  --ink:     #101623;
  --muted:   #5a6472;
  --line:    #e4e7ec;

  --ok:      #0e7a3c;
  --ok-bg:   #e3f3e9;
  --warn:    #8a5a00;
  --warn-bg: #fdf1d7;
  --err:     #c62828;
  --err-bg:  #fdeaea;

  --focus-ring: rgba(11,91,211,.35);
}

/* ---------- CAMADA 3 · COMPONENTES (usam só a camada 2) ---------- */
.dir-a, .dir-b {
  /* preço duplo — US$ âncora (vendasparaguai) · números tabulares */
  --price-usd-size: var(--fs-xl);
  --price-usd-color: var(--ink);
  --price-brl-size: var(--fs-s);
  --price-brl-color: var(--muted);
  --price-font-feat: "tnum" 1, "lnum" 1;

  /* selo de mercado */
  --selo-bg: var(--ok-bg);
  --selo-ink: var(--ok);

  /* botão */
  --btn-h: var(--tap-min);
  --btn-r: var(--r-m);
  --btn-pri-bg: var(--brand);
  --btn-pri-bg-hover: var(--brand-strong);
  --btn-pri-ink: var(--brand-ink);
  --btn-sec-border: var(--brand);
  --btn-sec-ink: var(--brand);

  /* campo */
  --field-h: var(--tap-min);
  --field-r: var(--r-m);
  --field-border: var(--line);
  --field-border-focus: var(--brand);
  --field-border-err: var(--err);

  /* card de produto */
  --card-r: var(--r-m);
  --card-bg: var(--surface);
  --card-border: var(--line);

  /* header */
  --header-bg: var(--surface);
  --cambio-bg: var(--brand-soft);
  --cambio-ink: var(--ink);

  /* disponibilidade (sempre texto + cor) */
  --stock-ok-ink: var(--ok);      --stock-ok-bg: var(--ok-bg);
  --stock-warn-ink: var(--warn);  --stock-warn-bg: var(--warn-bg);
  --stock-err-ink: var(--err);    --stock-err-bg: var(--err-bg);
}