/*
  Cardexa Design System — CAMADA 2: SEMÂNTICOS (AGENT §2). A ÚNICA camada que uma marca redefine.
  Mapeia papéis (superfície/texto/ação/feedback/estado/forma) a primitivos. Cada casca é um bloco escopado
  por [data-cx-theme]; a troca em runtime é só trocar esse atributo — sem rebuild, sem rede. O :root recebe a
  casca Cardexa como DEFAULT global (piso de fallback): um token não redefinido por um tenant resolve aqui.

  Nota de coerência: heads podem injetar, no servidor, um bloco <style>[data-cx-theme="X"]{--cx-...}</style>
  (ThemeContext.ToStyleBlock) para temas de tenant FUTUROS (categoria branding do C02) que não estão aqui —
  as duas cascas de referência abaixo bastam para o showcase e o white-label de demonstração.
*/

/* Casca Cardexa (default global + escopo nominal). */
:root,
[data-cx-theme="cardexa"] {
  --cx-color-surface: var(--cx-c-neutral-0);
  --cx-color-surface-muted: var(--cx-c-neutral-50);
  --cx-color-surface-raised: var(--cx-c-neutral-0);
  --cx-color-text: var(--cx-c-neutral-900);
  --cx-color-text-muted: var(--cx-c-neutral-600);
  --cx-color-text-on-action: var(--cx-c-neutral-0);
  --cx-color-border: var(--cx-c-neutral-200);
  --cx-color-focus-ring: var(--cx-c-brand-focus);

  --cx-color-action: var(--cx-c-brand-600);
  --cx-color-action-hover: var(--cx-c-brand-700);
  --cx-color-action-muted: var(--cx-c-brand-100);

  --cx-color-success: var(--cx-c-success);
  --cx-color-success-surface: var(--cx-c-success-surface);
  --cx-color-warning: var(--cx-c-warning);
  --cx-color-warning-surface: var(--cx-c-warning-surface);
  --cx-color-danger: var(--cx-c-danger);
  --cx-color-danger-surface: var(--cx-c-danger-surface);
  --cx-color-info: var(--cx-c-info);
  --cx-color-info-surface: var(--cx-c-info-surface);

  /* Sobreposição (véu + sombra flutuante) — semânticos, herdados pela whitelabel via :root. */
  --cx-color-scrim: var(--cx-c-scrim);
  --cx-shadow-overlay: var(--cx-shadow-2);

  --cx-font-family-base: var(--cx-font-sans);
  --cx-radius-control: var(--cx-radius-2);
  --cx-radius-surface: var(--cx-radius-3);
  --cx-radius-pill: var(--cx-radius-round);
  --cx-shadow-raised: var(--cx-shadow-1);

  /* ALTURA DO CONTROLE DE FORMULÁRIO (FORM-ALTURA-1) — UMA fonte só. Campo com afixo (R$, %), campo sem
     afixo, lista de opções e caixa de busca leem ESTE token, então dois campos lado a lado não têm por onde
     divergir. A casca pode redefinir o token num contêiner (o painel denso do Console usa 2.5rem); a casca
     NÃO pode declarar altura em .cx-input/.cx-select/.cx-input-affix — a Rule20 reprova o build se declarar.
     2.75rem (44px) é o piso de alvo de toque e já era a altura do .cx-btn, então campo e botão da mesma
     linha fecham na mesma conta. */
  --cx-control-height: 2.75rem;
  /* BORDA DO CONTROLE (GRADE-FAIXAS-2) — nomeada porque ela entra na CONTA da altura. Com box-sizing: border-box,
     o token de altura já inclui a borda; o que não fechava era o input NU dentro da moldura de afixo (a busca com
     lupa): ele lia `height: 100%`, e 100% da caixa de conteúdo da moldura é o token MENOS as duas bordas — 38px
     medidos ao lado de selects de 40px, 1px abaixo. O input agora lê o token inteiro e desconta esta MESMA borda
     em margem negativa, então os dois caminhos fecham no mesmo número por construção. Se a borda mudar, muda nos
     dois lugares de uma vez. */
  --cx-control-border-width: 1px;
  /* Texto longo tem altura PRÓPRIA e nomeada: três linhas não cabem na altura de uma. Mesma moldura, mesma
     conta de caixa; só a altura é outra, e é declarada aqui em vez de sair espalhada pelas cascas. */
  --cx-control-height-text: 6rem;
}

/* Casca whitelabel-demo (Loja Modelo): redefine SÓ o que muda; o resto cai no fallback Cardexa acima. */
[data-cx-theme="whitelabel-demo"] {
  --cx-color-surface: var(--cx-c-neutral-0);
  --cx-color-surface-muted: var(--cx-c-teal-surface);
  --cx-color-text: var(--cx-c-teal-ink);
  --cx-color-text-muted: var(--cx-c-teal-ink-muted);
  --cx-color-text-on-action: var(--cx-c-neutral-0);
  --cx-color-border: var(--cx-c-teal-border);
  --cx-color-focus-ring: var(--cx-c-teal-600);

  --cx-color-action: var(--cx-c-teal-600);
  --cx-color-action-hover: var(--cx-c-teal-700);
  --cx-color-action-muted: var(--cx-c-teal-100);

  --cx-font-family-base: var(--cx-font-rounded);
  --cx-radius-control: var(--cx-radius-1);
  --cx-radius-surface: var(--cx-radius-2);
}