/* =============================================================================
   Área do cliente do Financeiro — tokens.
   Documentação: docs/financeiro-premium/AREA-CLIENTE.md

   Escopo: tudo que o React desenha dentro de `.fx` (acesso, onboarding e app do
   cliente). Nada aqui vai para `:root`: site público, operador, Estoque e
   Portfólio não enxergam estes nomes.

   Só custom properties. Os derivados são `color-mix()` das cinco cores de
   web/shared/static/css/tokens.css (o valor resultante está no comentário).
   `--danger` e `--success` são os dois únicos hex novos, pedidos pelo dono para
   erro/vencido/negativo e sucesso/pago/aceita; scripts/quality/lint-brand.py
   recusa qualquer outro hex neste arquivo.
   ============================================================================= */

.fx {
  /* Texto: --ink, --ink-2, --ink-3, --field-border, --danger e --success vêm
     do kit de campos (web/shared/ui/fields.css), com os mesmos valores. */
  --on-dark: var(--brand-white);
  --on-dark-2: color-mix(in srgb, var(--brand-blue) 22%, var(--brand-white)); /* CAD0D6 · 9,4:1 no azul */
  --on-dark-3: color-mix(in srgb, var(--brand-blue) 40%, var(--brand-white)); /* 9FAAB4 · 6,2:1 no azul */
  --orange-ink: color-mix(in srgb, var(--brand-orange) 56%, black);          /* 895D14 · 5,8:1 no branco */

  /* Linhas e superfícies */
  --line: color-mix(in srgb, var(--brand-blue) 10%, transparent);
  --surface-app: color-mix(in srgb, var(--brand-gray-100) 58%, var(--brand-white)); /* F4F4F4 */
  --surface-card: var(--brand-white);
  --surface-beige: color-mix(in srgb, var(--brand-beige) 21.5%, var(--brand-white)); /* F7F1E9 */
  --tint-orange: color-mix(in srgb, var(--brand-orange) 18%, var(--brand-white));    /* FDEFD7 */
  --tint-blue: color-mix(in srgb, var(--brand-blue) 8%, var(--brand-white));         /* ECEEF0 */
  --blue-hover: color-mix(in srgb, var(--brand-blue) 92%, var(--brand-white));       /* 223B53 */
  --blue-900: color-mix(in srgb, var(--brand-blue) 71%, black);                      /* 0B1E30 */

  /* Semântica: sempre com ícone e texto, nunca só a cor. */
  --danger-tint: color-mix(in srgb, var(--danger) 10%, var(--brand-white));  /* F6E9E8 */
  --success-tint: color-mix(in srgb, var(--success) 10%, var(--brand-white)); /* E8F0EC */

  /* Gráficos (parte 2): azul e laranja da marca no mesmo matiz, em tom de marca
     gráfica. Entradas são sempre azuis e saídas sempre laranja. Validadas para
     daltonismo (ΔE 29,7 normal, 24,1 protanopia entre as duas). Texto nunca usa
     estas cores: valor e legenda ficam nos tokens de texto. */
  --chart-in: #2A669F;                                                       /* 6,0:1 no branco */
  --chart-out: #C58203;                                                      /* 3,2:1 no branco */
  --chart-in-open: color-mix(in srgb, var(--chart-in) 40%, var(--brand-white));   /* AAC2D9 · em aberto */
  --chart-out-open: color-mix(in srgb, var(--chart-out) 40%, var(--brand-white)); /* E8CD9A · em aberto */
  --chart-total: var(--brand-blue);
  --chart-grid: var(--brand-gray-100);                                       /* ECECEC */
  --chart-track: color-mix(in srgb, var(--chart-in) 15%, var(--brand-white)); /* DFE8F1 · trilho dos medidores */

  /* Forma */
  --r-field: 10px;
  --r-card: 20px;
  --r-panel: 28px;
  --r-pill: 999px;
  --h-field: 48px;
  --h-btn: 44px;
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--brand-blue) 6%, transparent),
    0 8px 24px -12px color-mix(in srgb, var(--brand-blue) 10%, transparent);
  --shadow-pop: 0 4px 10px color-mix(in srgb, var(--brand-blue) 8%, transparent),
    0 24px 48px -16px color-mix(in srgb, var(--brand-blue) 24%, transparent);

  /* Movimento */
  --t-press: 120ms;
  --t-hover: 160ms;
  --t-route: 200ms;
  --t-layer: 240ms;
  --t-success: 600ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Casca */
  --sidebar-w: 264px;
  --rail-w: 72px;
  --topbar-h: 64px;
  --mobile-head-h: 56px;
  --bottom-bar-h: 64px;

  /* Os controles compartilhados (select e data de controls.css) leem estes
     nomes da fundação: aqui eles passam a valer o campo único do produto. */
  --border-strong: var(--field-border);
  --border-subtle: var(--line);
  --ink-soft: var(--ink-3);
  --ink-muted: var(--ink-2);
  --placeholder-ink: var(--ink-3);
  --control-min-height: var(--h-field);
  --radius-field: var(--r-field);
  --text-operational: 1rem;
}

@media (max-width: 1023px) {
  .fx { --h-btn: 48px; }
}

@media (prefers-contrast: more) {
  .fx {
    --ink-2: var(--brand-blue);
    --ink-3: var(--brand-blue);
    --field-border: var(--brand-blue);
    --line: color-mix(in srgb, var(--brand-blue) 45%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx {
    --t-press: 1ms;
    --t-hover: 1ms;
    --t-route: 1ms;
    --t-layer: 1ms;
    --t-success: 1ms;
  }
}