/*
 * ck-tokens.css — Story 1.19 (epic-001 Bloco 4, Fundação do Redesign).
 * Design tokens conforme frontend-spec.md §4.2 (paleta) e §4.3 (tipografia).
 *
 * AC-chave da 1.19: "zero mudança visual perceptível nesta story". Custom properties
 * declaradas em :root não têm NENHUM efeito visual até que uma regra CSS as referencie via
 * var(--nome) — nenhuma regra deste arquivo faz isso ainda. Ficam disponíveis para as Ondas
 * do Bloco 5 (redesign visual de fato) as consumirem progressivamente, componente por vez.
 *
 * Divergência corrigida contra a doc: frontend-spec.md §4.2 descreve .azulado como ciano
 * (#00a9d1). O CSS real (css/style-bayrrow.css:40204) é azul marinho #001489. O código real
 * prevalece — ver a renomeação .azulado -> .brand-accent nesta mesma story, que preserva
 * #001489 exatamente (a migração de cor para --ck-brand é decisão visual, não desta story).
 */
:root {
  /* ---- Marca (definitiva, para quando os componentes migrarem — ainda não referenciada) ---- */
  --ck-brand:        #E85D04;  /* laranja principal — CTAs, links ativos */
  --ck-brand-hover:  #C94F03;
  --ck-brand-soft:   #FFF1E6;  /* fundo de badge/pill/alerta suave */
  --ck-brand-ink:    #7A3102;  /* texto sobre --ck-brand-soft (contraste 7:1) */

  /* ---- Secundária (frescor / alimentar) ---- */
  --ck-fresh:        #2E7D32;  /* "Frete grátis", "em estoque", preço promocional */
  --ck-fresh-soft:   #E8F5E9;

  /* ---- Neutros ---- */
  --ck-ink:          #1A1A1A;  /* títulos e preço */
  --ck-ink-2:        #4A4A4A;  /* corpo de texto — substitui #666666, contraste 8,6:1 */
  --ck-ink-3:        #767676;  /* metadados — contraste 4,54:1, mínimo AA */
  --ck-line:         #E5E5E5;  /* bordas */
  --ck-surface:      #FFFFFF;
  --ck-surface-2:    #F7F7F7;  /* fundo de página / faixas */

  /* ---- Semânticos ---- */
  --ck-sale:         #C62828;  /* selo de desconto — substitui #cd0114 */
  --ck-warn:         #F9A825;
  --ck-error:        #C62828;

  /* ---- Elevação ---- */
  --ck-shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --ck-shadow-2: 0 4px 12px rgba(0,0,0,.10);

  /* ---- Raio ---- */
  --ck-r-sm: 6px;  --ck-r-md: 10px;  --ck-r-lg: 16px;  --ck-r-pill: 999px;

  /* ---- Tipografia ---- */
  --ck-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* escala fluida — mobile-first, sem media query */
  --ck-fs-xs:    0.75rem;                              /* 12px — metadados */
  --ck-fs-sm:    0.875rem;                             /* 14px — preço riscado, labels */
  --ck-fs-base:  1rem;                                 /* 16px — corpo (nunca menor em input!) */
  --ck-fs-price: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --ck-fs-h3:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --ck-fs-h2:    clamp(1.25rem,  1.1rem + 1vw,  1.75rem);
  --ck-fs-h1:    clamp(1.5rem,   1.2rem + 2vw,  2.25rem);

  --ck-lh-tight: 1.25;  --ck-lh-base: 1.55;

  /* ---- Marca — valor ATUAL preservado (renomeação .azulado -> .brand-accent) ---- */
  --ck-brand-accent-current: #001489;  /* = .azulado hoje. Ver .brand-accent abaixo. */
}

/*
 * .brand-accent substitui .azulado (TD-B06). Cor preservada EXATAMENTE igual à regra .azulado
 * original (css/style-bayrrow.css:40204) — zero mudança visual. A migração de cor para
 * --ck-brand (laranja, o theme_color real do PWA) é decisão de uma story de redesign visual,
 * não desta fundação.
 */
.brand-accent {
  color: var(--ck-brand-accent-current) !important;
  font-weight: bold;
}