:root{
  /* Brand palette — brandbook §10.4, approved, exactly four colors */
  --il-green:#8ED938;        /* primária — a cor da marca */
  --il-deep:#0C1406;         /* verde-profundo — base escura, quase preta */
  --il-sand:#EFEAE1;         /* areia — base clara, fundo padrão do e-commerce */
  --il-brown:#6E5343;        /* marrom terroso — aterramento */
  --il-black:#000000;        /* preto puro — tipografia e logotipo */
  /* Derived neutrals (tints of the approved palette, not new colors) */
  --il-sand-bright:#F7F4ED;  /* card surface on sand */
  --il-sand-dim:#E3DCCE;     /* pressed / hover on sand */
  /* Degraus discretos de estado — flat design troca a cor, não aplica filtro/sombra/opacidade */
  --il-green-hover:#7CC42A;
  --il-green-press:#6BAF20;
  --il-deep-hover:#1A2A10;
  --il-sand-press:#D6CDBB;
  --il-ink-62:rgba(0,0,0,.62);
  --il-ink-40:rgba(0,0,0,.40);
  --il-line:rgba(12,20,6,.18);
  --il-line-strong:var(--il-black);
  --il-sand-on-deep:rgba(239,234,225,.64);
  --scrim:rgba(12,20,6,.55);      /* overlay atrás de diálogo/drawer */
  --scrim-photo:rgba(12,20,6,.38); /* proteção sobre foto no hero */
  /* Semantic */
  --surface-page:var(--il-sand);
  --surface-card:var(--il-sand-bright);
  --surface-dark:var(--il-deep);
  --surface-brand:var(--il-green);
  --text-body:var(--il-black);
  --text-muted:var(--il-ink-62);
  --text-inverse:var(--il-sand);
  --text-on-green:var(--il-black);   /* preto sobre verde 12,1:1 AAA — "este é o botão" */
  --cta-bg:var(--il-green);
  --cta-bg-hover:var(--il-green-hover);
  --cta-bg-press:var(--il-green-press);
  --cta-text:var(--il-black);
  /* Highlight — o verde marca a palavra que carrega a frase. Sempre bloco verde + texto preto (12,1:1);
     nunca texto verde sobre claro. Uma marcação por bloco de texto. */
  --highlight-bg:var(--il-green);
  --highlight-text:var(--il-black);
  --highlight-rule:var(--il-green); /* filete/underline de destaque */
  /* profundidade do corte diagonal na variante .il-highlight-cut */
  --highlight-cut:0.34em; /* @kind spacing */
  --link:var(--il-black);
  --link-hover:var(--il-brown);
  /* Interface-state colors — OUTSIDE the brand palette by rule (§10.4 "por que só três");
     never use in communication pieces */
  --ui-error:#A93226;
  --ui-success:#3E6B24;
  --ui-warning:#8F6A12;
}