/*
  Appyon Payments Cockpit — Design Tokens (Frente B2)
  Paleta recalibrada a partir dos 9 mockups (tema escuro é a referência visual;
  tema claro é interpretação coerente da mesma estrutura — não há mockup claro).
  Regra: nenhum componente usa cor literal — sempre var(--token).
*/

:root{
  /* ---------- PRIMITIVAS — TIPOGRAFIA ---------- */
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --text-display-size:28px; --text-display-line:34px; --text-display-weight:700; --text-display-tracking:-0.01em;
  --text-h2-size:19px;      --text-h2-line:25px;      --text-h2-weight:700;      --text-h2-tracking:-0.005em;
  --text-h3-size:15px;      --text-h3-line:20px;      --text-h3-weight:700;      --text-h3-tracking:0;
  --text-body-size:14px;    --text-body-line:20px;    --text-body-weight:400;
  --text-body-strong-weight:600;
  --text-caption-size:12.5px; --text-caption-line:17px; --text-caption-weight:500;
  --text-label-size:11px;   --text-label-line:16px;   --text-label-weight:700; --text-label-tracking:.07em;
  --text-mono-lg-size:26px; --text-mono-lg-line:32px; --text-mono-lg-weight:700;
  --text-mono-md-size:18px; --text-mono-md-line:24px; --text-mono-md-weight:700;
  --text-mono-body-size:13.5px; --text-mono-body-line:19px; --text-mono-body-weight:500;

  /* ---------- PRIMITIVAS — ESPAÇAMENTO (grade de 4px) ---------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:40px; --space-8:48px;

  /* ---------- PRIMITIVAS — RAIO ---------- */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:14px;
  --radius-pill:999px;

  /* ---------- PRIMITIVAS — MOVIMENTO ---------- */
  --motion-fast:120ms;
  --motion-base:160ms;
  --motion-slow:220ms;
  --ease-standard:cubic-bezier(.2,.8,.2,1);

  /* ---------- PRIMITIVAS — LAYOUT ---------- */
  --sidebar-w:236px;
  --header-h:64px;

  /* ---------- PRIMITIVAS — CAMADAS (z-index) ---------- */
  --z-sticky:40; --z-header:45; --z-sidebar:50; --z-menu:60; --z-overlay:65; --z-drawer:70;

  /* ==================== SEMÂNTICAS — TEMA ESCURO (default, fiel aos mockups) ==================== */
  --bg:#071220;
  --bg-elevated:#0a1626;
  --sidebar-bg:#0a1a2b;
  --panel:#0d1c2e;
  --panel-hover:#122741;
  --row-alt:#0f2033;
  --table-head-bg:#0c1d2f;

  --hairline:#ffffff17;
  --hairline-strong:#ffffff28;

  --text:#f3f6fc;
  --text-2:#aab8d4;
  --text-3:#7c8aa8;

  --accent:#2f6fed;
  --accent-strong:#4c86ff;
  --accent-soft:#122c52;
  --accent-active:#063783;
  --on-accent:#ffffff;

  --good:#3ddc97;    --good-bg:#0e2b22;   --good-line:#1f6b4d;
  --warn:#f5b93d;    --warn-bg:#2c2310;   --warn-line:#7a5c14;
  --warn2:#f2924a;   --warn2-bg:#2c1e10;  --warn2-line:#7a4a14;
  --bad:#f66c7c;     --bad-bg:#33121a;    --bad-line:#7a2331;
  --ctx:#9c8cf5;     --ctx-bg:#1b1a3a;    --ctx-line:#4a3f8f;

  --tile-blue-bg:#0d1d30;   --tile-blue-line:#1c3a5e;
  --tile-green-bg:#032026;  --tile-green-line:#0f4b45;
  --tile-yellow-bg:#362e12; --tile-yellow-line:#6b551a;
  --tile-red-bg:#391824;   --tile-red-line:#6e2438;
  --tile-indigo-bg:#092448; --tile-indigo-line:#233f78;

  --input-bg:#0b1626;
  --input-border:#3a4a68;
  --input-focus:var(--accent-strong);

  --sticky-bg:#0a1626e0;
  --menu-bg:#101d31f5;
  --menu-shadow:0 18px 40px -10px #00000070, 0 4px 14px -4px #00000052;

  --overlay:#02060d8c;

  --shadow-1:0 1px 2px #0000004a, 0 1px 1px #00000030;
  --shadow-2:0 18px 40px -10px #00000070, 0 4px 14px -4px #00000052;

  /* ---------- ADITIVOS: sidebar (--sb-*), ícones de KPI e superfícies do Payments Analytics ---------- */
  --sb-bg:#0a1a2b;
  --sb-border:#ffffff17;
  --sb-fg:#e7edf9;
  --sb-brand-end:#7aa2ff;
  --sb-text-sub:#93a2c2;
  --sb-text:#c3ccdf;
  --sb-hover-bg:#ffffff0f;
  --sb-hover-fg:#ffffff;
  --sb-active-bg:#063783;
  --sb-active-fg:#ffffff;
  --sb-active-icon:#ffffff;
  --sb-group-label:#7c88ab;
  --sb-group-label-hover:#c3ccdf;
  --sb-sep:#ffffff14;
  --sb-foot-text:#8b98b8;
  --sb-foot-text-3:#6b7a9a;
  --kpi-ic-receita:#3b82f6;
  --kpi-ic-receita-bg:#3b82f624;
  --kpi-ic-cit:#34d399;
  --kpi-ic-cit-bg:#34d39924;
  --kpi-ic-captura:#f43f5e;
  --kpi-ic-captura-bg:#f43f5e24;
  --kpi-ic-mit:#f59e0b;
  --kpi-ic-mit-bg:#f59e0b24;
  --kpi-ic-recuperacao:#6366f1;
  --kpi-ic-recuperacao-bg:#6366f124;
  --kpi-ic-disputas:#a78bfa;
  --kpi-ic-disputas-bg:#a78bfa24;
  --an-canvas:#07111d;
  --an-surface:#0f1e2e;
  --an-surface-2:#132438;
  --an-border-subtle:#24364a;
  --an-text:#f4f7fb;
  --an-text-2:#a7b4c5;
  --an-text-3:#708197;
  --an-primary:#3b82f6;
  --an-shadow-card:none;
  --an-radius-card:12px;
  --an-spark-stroke:#3b82f6;
  --an-spark-fill:#3b82f61f;
  --psp-stripe:#635bff;
  --psp-stripe-ink:#ffffff;
  --psp-adyen:#0abf53;
  --psp-adyen-ink:#04210f;
  --psp-primer:#16a34a;
  --psp-primer-ink:#ffffff;
  --psp-funnelfox:#f26b21;
  --psp-funnelfox-ink:#ffffff;
}

/* ==================== SEMÂNTICAS — TEMA CLARO (escolha explícita) ==================== */
:root[data-theme="light"]{
  --bg:#eef1f7;
  --bg-elevated:#ffffff;
  --sidebar-bg:#0e1d30;
  --panel:#ffffff;
  --panel-hover:#f4f6fb;
  --row-alt:#f7f9fc;
  --table-head-bg:#f2f4f9;

  --hairline:#0f1a2e14;
  --hairline-strong:#0f1a2e26;

  --text:#121826;
  --text-2:#4a5670;
  --text-3:#64708c;

  --accent:#2f6fed;
  --accent-strong:#1d59d6;
  --accent-soft:#e7f0ff;
  --accent-active:#2f6fed;
  --on-accent:#ffffff;

  /* QA reconciliação: --good e --warn originais (#1a8a5c/#9a6c00) mediam 3.95:1 e 4.32:1 contra
     --good-bg/--warn-bg — abaixo do mínimo WCAG AA (4.5:1) para o texto pequeno (11–12.5px) dos
     chips/badges de status (.chip-good, .pd-ai-status, .lv-Bom etc). Escurecidos mantendo o
     matiz até 4.72:1 e 5.12:1; tema escuro já passava (8.57:1/8.77:1), não alterado. */
  --good:#177c53;    --good-bg:#e7f8f0;   --good-line:#a7e0c2;
  --warn:#8b6100;    --warn-bg:#fff6df;   --warn-line:#f0d28a;
  --warn2:#9a5300;   --warn2-bg:#fdecdc;  --warn2-line:#efc29a;
  --bad:#c22a3d;     --bad-bg:#fce9ec;    --bad-line:#f0aeb9;
  --ctx:#5a3ea3;     --ctx-bg:#f1ecfb;    --ctx-line:#cbb8f0;

  --tile-blue-bg:#e9f1ff;   --tile-blue-line:#c7dcff;
  --tile-green-bg:#e5faf1;  --tile-green-line:#bdeed7;
  --tile-yellow-bg:#fff6df; --tile-yellow-line:#f2debd;
  --tile-red-bg:#fdeaee;    --tile-red-line:#f4c3cd;
  --tile-indigo-bg:#eaeeff; --tile-indigo-line:#c8d0fb;

  --input-bg:#ffffff;
  --input-border:#8492ae;
  --input-focus:var(--accent);

  --sticky-bg:#ffffffd6;
  --menu-bg:#fffffff5;
  --menu-shadow:0 16px 36px -10px #0f1a2e33, 0 4px 12px -4px #0f1a2e1f;

  --overlay:#0b122073;

  --shadow-1:0 1px 2px #0f1a2e0f, 0 1px 1px #0f1a2e08;
  --shadow-2:0 14px 32px -10px #0f1a2e29, 0 4px 10px -4px #0f1a2e14;

  /* ---------- ADITIVOS: sidebar clara, ícones de KPI e superfícies do Analytics ---------- */
  --sb-bg:#ffffff;
  --sb-border:#e2e8f0;
  --sb-fg:#0f172a;
  --sb-brand-end:#7aa2ff;
  --sb-text-sub:#64748b;
  --sb-text:#475569;
  --sb-hover-bg:#0f172a0a;
  --sb-hover-fg:#0f172a;
  --sb-active-bg:#2563eb1f;
  --sb-active-fg:#1d4ed8;
  --sb-active-icon:#1d4ed8;
  --sb-group-label:#64748b;
  --sb-group-label-hover:#0f172a;
  --sb-sep:#0f172a14;
  --sb-foot-text:#64748b;
  --sb-foot-text-3:#64748b;
  --kpi-ic-receita:#2563eb;
  --kpi-ic-receita-bg:#2563eb1a;
  --kpi-ic-cit:#059669;
  --kpi-ic-cit-bg:#0596691a;
  --kpi-ic-captura:#e11d48;
  --kpi-ic-captura-bg:#e11d481a;
  --kpi-ic-mit:#d97706;
  --kpi-ic-mit-bg:#d977061a;
  --kpi-ic-recuperacao:#4f46e5;
  --kpi-ic-recuperacao-bg:#4f46e51a;
  --kpi-ic-disputas:#7c3aed;
  --kpi-ic-disputas-bg:#7c3aed1a;
  --an-canvas:#f3f5f9;
  --an-surface:#ffffff;
  --an-surface-2:#f8fafc;
  --an-border-subtle:#e2e8f0;
  --an-text:#0f172a;
  --an-text-2:#475569;
  --an-text-3:#64748b;
  --an-primary:#2563eb;
  --an-shadow-card:0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.04);
  --an-radius-card:12px;
  --an-spark-stroke:#2563eb;
  --an-spark-fill:#2563eb14;
  --psp-stripe:#635bff;
  --psp-stripe-ink:#ffffff;
  --psp-adyen:#0abf53;
  --psp-adyen-ink:#04210f;
  --psp-primer:#16a34a;
  --psp-primer-ink:#ffffff;
  --psp-funnelfox:#f26b21;
  --psp-funnelfox-ink:#ffffff;
}

/* Sistema sem escolha explícita: segue o SO, default escuro (mesmo shape do dark acima) */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#eef1f7; --bg-elevated:#ffffff; --sidebar-bg:#0e1d30; --panel:#ffffff; --panel-hover:#f4f6fb;
    --row-alt:#f7f9fc; --table-head-bg:#f2f4f9;
    --hairline:#0f1a2e14; --hairline-strong:#0f1a2e26;
    --text:#121826; --text-2:#4a5670; --text-3:#64708c;
    --accent:#2f6fed; --accent-strong:#1d59d6; --accent-soft:#e7f0ff; --accent-active:#2f6fed; --on-accent:#ffffff;
    --good:#177c53; --good-bg:#e7f8f0; --good-line:#a7e0c2;
    --warn:#8b6100; --warn-bg:#fff6df; --warn-line:#f0d28a;
    --warn2:#9a5300; --warn2-bg:#fdecdc; --warn2-line:#efc29a;
    --bad:#c22a3d; --bad-bg:#fce9ec; --bad-line:#f0aeb9;
    --ctx:#5a3ea3; --ctx-bg:#f1ecfb; --ctx-line:#cbb8f0;
    --tile-blue-bg:#e9f1ff; --tile-blue-line:#c7dcff;
    --tile-green-bg:#e5faf1; --tile-green-line:#bdeed7;
    --tile-yellow-bg:#fff6df; --tile-yellow-line:#f2debd;
    --tile-red-bg:#fdeaee; --tile-red-line:#f4c3cd;
    --tile-indigo-bg:#eaeeff; --tile-indigo-line:#c8d0fb;
    --input-bg:#ffffff; --input-border:#8492ae; --input-focus:var(--accent);
    --sticky-bg:#ffffffd6; --menu-bg:#fffffff5;
    --menu-shadow:0 16px 36px -10px #0f1a2e33, 0 4px 12px -4px #0f1a2e1f;
    --overlay:#0b122073;
    --shadow-1:0 1px 2px #0f1a2e0f, 0 1px 1px #0f1a2e08;
    --shadow-2:0 14px 32px -10px #0f1a2e29, 0 4px 10px -4px #0f1a2e14;
    --sb-bg:#ffffff;
    --sb-border:#e2e8f0;
    --sb-fg:#0f172a;
    --sb-brand-end:#7aa2ff;
    --sb-text-sub:#64748b;
    --sb-text:#475569;
    --sb-hover-bg:#0f172a0a;
    --sb-hover-fg:#0f172a;
    --sb-active-bg:#2563eb1f;
    --sb-active-fg:#1d4ed8;
    --sb-active-icon:#1d4ed8;
    --sb-group-label:#64748b;
    --sb-group-label-hover:#0f172a;
    --sb-sep:#0f172a14;
    --sb-foot-text:#64748b;
    --sb-foot-text-3:#64748b;
    --kpi-ic-receita:#2563eb;
    --kpi-ic-receita-bg:#2563eb1a;
    --kpi-ic-cit:#059669;
    --kpi-ic-cit-bg:#0596691a;
    --kpi-ic-captura:#e11d48;
    --kpi-ic-captura-bg:#e11d481a;
    --kpi-ic-mit:#d97706;
    --kpi-ic-mit-bg:#d977061a;
    --kpi-ic-recuperacao:#4f46e5;
    --kpi-ic-recuperacao-bg:#4f46e51a;
    --kpi-ic-disputas:#7c3aed;
    --kpi-ic-disputas-bg:#7c3aed1a;
    --an-canvas:#f3f5f9;
    --an-surface:#ffffff;
    --an-surface-2:#f8fafc;
    --an-border-subtle:#e2e8f0;
    --an-text:#0f172a;
    --an-text-2:#475569;
    --an-text-3:#64748b;
    --an-primary:#2563eb;
    --an-shadow-card:0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.04);
    --an-radius-card:12px;
    --an-spark-stroke:#2563eb;
    --an-spark-fill:#2563eb14;
    --psp-stripe:#635bff;
    --psp-stripe-ink:#ffffff;
    --psp-adyen:#0abf53;
    --psp-adyen-ink:#04210f;
    --psp-primer:#16a34a;
    --psp-primer-ink:#ffffff;
    --psp-funnelfox:#f26b21;
    --psp-funnelfox-ink:#ffffff;
  }
}

:root[data-theme="dark"]{ /* redundante ao default, mantido explícito p/ clareza de intenção do usuário */ }

@media (prefers-reduced-motion: reduce){
  :root{ --motion-fast:0ms; --motion-base:0ms; --motion-slow:0ms; }
}