/* app/static/css/theme.css */

/* =========================================================
   THEME SYSTEM — SISTEMA VISA
   - Light / Dark / Print
   - Tokens coerentes para bordas, linhas, superfícies e sombras
========================================================= */

:root{
  /* =========================================================
     0) MOTION (global)
     - Padrão para transições (modais, sidebar, dropdown, etc.)
     ========================================================= */
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --ease-emph:     cubic-bezier(.16,1,.3,1);

  --motion-fast:  140ms;
  --motion-md:    200ms;
  --motion-slow:  320ms;

  --motion-enter-y: 18px;

  /* =========================================================
     1) BRAND — PALETA INSTITUCIONAL (LOGO)
     ========================================================= */
  --brand-charcoal: #343434;
  --brand-red:      #a42d2d;
  --brand-gray-100: #e9e9e9;
  --brand-gray-200: #d5d3d3;
  --brand-gray-300: #a99494;
  --brand-gray-500: #7d7c7c;

  /* =========================================================
     2) NEUTRALS — (superfícies e textos) — LIGHT
     ========================================================= */
  --n-0:   #ffffff;
  --n-50:  #fbfcff;
  --n-100: #f5f7fb;
  --n-150: #eef1f6;
  --n-200: #e7ebf3;
  --n-300: #cbd5e1;
  --n-600: #5b6476;
  --n-800: #1f2a44;
  --n-900: #0b1220;

  /* =========================================================
     3) SEMANTIC — (papéis do sistema)
     ========================================================= */
  /* Fundo base “compat” (não remover) */
  --c-bg:        var(--n-100);

  /* Mesa/backdrop (full width) — premium */
  --c-backdrop:  var(--n-100);
   --c-backdrop-grad:
      radial-gradient(1200px 760px at 18% -12%, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 56%),
      radial-gradient(980px 640px at 92% 6%,  rgba(0,0,0,0.06), transparent 62%),
      radial-gradient(900px 520px at 50% 120%, rgba(0,0,0,0.05), transparent 65%),
      linear-gradient(180deg, var(--n-100) 0%, color-mix(in srgb, var(--n-150) 62%, var(--n-100)) 100%);

   --shadow-soft:   0 10px 26px rgba(0,0,0,0.06);
   --shadow-soft-2: 0 16px 40px rgba(0,0,0,0.14);

  --c-surface:   var(--n-0);
  --c-surface-2: var(--n-50);

  --c-text:      var(--n-900);
  --c-muted:     var(--n-600);

  /* Semânticos auxiliares (reduz dependência de --n-*) */
  --c-heading:   var(--n-800);
  --c-on-accent: #ffffff;
  --c-soft:      color-mix(in srgb, var(--n-150) 46%, var(--n-0));

  --c-border:    var(--n-200);
  --c-border-2:  color-mix(in srgb, var(--n-200) 70%, var(--n-0));

  /* Acento principal do sistema (CTA / links / foco) */
  --c-accent:    var(--brand-red);
  --c-accent-2:  color-mix(in srgb, var(--c-accent) 75%, var(--n-0));

  /* Estados */
  --c-danger:  var(--brand-red);
  --c-success: #2f6b4f;
  --c-warning: #b07a1a;

  /* =========================================================
     4) COMPONENT TOKENS
     ========================================================= */
  --sidebar-bg: linear-gradient(180deg, #000000 0%, #2e2e2e 100%);
  --sidebar-bg-2: #2e2e2e;
  --sidebar-text: rgba(255,255,255,0.92);
  --sidebar-item-hover: rgba(255,255,255,0.08);
  --sidebar-active-bg: color-mix(in srgb, var(--c-accent) 25%, transparent);
  --sidebar-active-outline: color-mix(in srgb, var(--c-accent) 35%, transparent);

  --topbar-bg: var(--c-surface);
  --topbar-border: var(--c-border);

  --card-bg: var(--c-surface);
  --card-border: var(--c-border);

  /* =========================================================
     5) PANELS / TABLES — CAMADAS
     ========================================================= */
  --panel-bg:        var(--c-surface);
  --panel-head-bg:   color-mix(in srgb, var(--n-150) 70%, var(--n-0));
  --panel-inner-bg:  color-mix(in srgb, var(--n-150) 40%, var(--n-0));
  --panel-foot-bg:   color-mix(in srgb, var(--n-150) 62%, var(--n-0));

  /* =========================================================
     5.1) UX PADRÃO 2 (pontual/premium)
     - Uso restrito a superfícies especiais (ex.: ficha de usuário).
     - NÃO aplicar em componentes globais de módulos (botões CRUD/tabelas padrão).
     ========================================================= */
  --ux2-surface: color-mix(in srgb, var(--panel-bg) 86%, #fff);
  --ux2-head:    color-mix(in srgb, var(--panel-head-bg) 74%, #fff);
  --ux2-inner:   color-mix(in srgb, var(--panel-inner-bg) 76%, #fff);
  --ux2-foot:    color-mix(in srgb, var(--panel-foot-bg) 74%, #fff);
  --ux2-hover:   color-mix(in srgb, var(--hover-soft) 76%, #fff);
  --ux2-avatar-bg: color-mix(in srgb, var(--c-accent) 34%, #fff);

  --hover-soft: color-mix(in srgb, var(--c-border) 55%, var(--n-0));

  --table-head-bg: color-mix(in srgb, var(--n-150) 78%, var(--n-0));
  --table-row-a:  color-mix(in srgb, var(--n-150) 28%, var(--n-0));
  --table-row-b:  color-mix(in srgb, var(--n-150) 14%, var(--n-0));

  /* =========================================================
     6) BUTTON SYSTEM
     ========================================================= */
  --btn-bg:     var(--c-accent);
  --btn-text:   var(--c-on-accent);
  --btn-border: var(--c-accent);

  --btn-secondary-bg: color-mix(in srgb, var(--c-accent) 12%, var(--n-0));
  --btn-secondary-text: color-mix(in srgb, var(--c-text) 92%, #000);
  --btn-secondary-border: color-mix(in srgb, var(--c-accent) 22%, var(--c-border));

  --btn-ghost-bg: color-mix(in srgb, var(--n-150) 30%, var(--n-0));
  --btn-ghost-text: color-mix(in srgb, var(--c-text) 88%, #000);
  --btn-ghost-border: color-mix(in srgb, var(--c-border) 70%, var(--n-0));

  /* =========================================================
     6.1) TOAST SYSTEM (feedback global)
     - Paleta padronizada para sucesso/aviso/erro/info/neutro
     ========================================================= */
  --toast-bg: color-mix(in srgb, var(--c-text) 92%, #000);
  --toast-text: #ffffff;
  --toast-border: color-mix(in srgb, var(--c-border) 72%, transparent);

  --toast-success-bg: color-mix(in srgb, var(--c-success) 88%, #000);
  --toast-success-border: color-mix(in srgb, var(--c-success) 30%, var(--c-border));

  --toast-warning-bg: color-mix(in srgb, var(--c-warning) 90%, #000);
  --toast-warning-border: color-mix(in srgb, var(--c-warning) 30%, var(--c-border));

  --toast-error-bg: color-mix(in srgb, var(--c-danger) 88%, #000);
  --toast-error-border: color-mix(in srgb, var(--c-danger) 30%, var(--c-border));

  --toast-info-bg: color-mix(in srgb, var(--c-accent) 88%, #000);
  --toast-info-border: color-mix(in srgb, var(--c-accent) 30%, var(--c-border));

  /* =========================================================
     7) GRADIENTES (LOGIN)
     ========================================================= */
  --grad-login-accent: #a70000;
  --grad-login-deep:   #492222;
  --grad-login-hot:    #ff0000;

  --grad-login-accent-rgb: 167 0 0;
  --grad-login-deep-rgb:    73 34 34;
  --grad-login-hot-rgb:    255 0 0;

  --grad-login-opacity-strong: 0.65;
  --grad-login-opacity-soft:   0.55;

  /* =========================================================
     8) CHART TOKENS
     ========================================================= */
  --chart-pay-a: color-mix(in srgb, var(--c-danger) 92%, #000);
  --chart-pay-b: color-mix(in srgb, var(--c-danger) 70%, var(--n-0));
  --chart-pay-c: color-mix(in srgb, var(--c-danger) 45%, var(--n-0));

  --chart-rec-a: color-mix(in srgb, var(--c-success) 92%, #000);
  --chart-rec-b: color-mix(in srgb, var(--c-success) 70%, var(--n-0));
  --chart-rec-c: color-mix(in srgb, var(--c-success) 45%, var(--n-0));

  --chart-neu-a: color-mix(in srgb, var(--brand-charcoal) 70%, var(--n-0));
  --chart-neu-b: color-mix(in srgb, var(--brand-charcoal) 50%, var(--n-0));
  --chart-neu-c: color-mix(in srgb, var(--brand-charcoal) 30%, var(--n-0));

  /* =========================================================
     9) SHADOW TOKENS (light/dark adaptável)
     ========================================================= */
  --shadow-soft:   0 10px 26px rgba(0,0,0,0.06);
  --shadow-soft-2: 0 16px 40px rgba(0,0,0,0.14);

   /* =========================================================
     9.1) DEPTH / STROKES — premium (reutilizável)
     ========================================================= */
  --elev-1: var(--shadow-soft);
  --elev-2: var(--shadow-soft-2);

  /* borda sutil “glow/soft” que funciona no light/dark */
  --stroke-soft: color-mix(in srgb, var(--c-border) 68%, var(--n-0));

  /* =========================================================
     ALIASES — compatibilidade (fin-*)
     ========================================================= */
  --fin-bg: var(--c-bg);
  --fin-text: var(--c-text);
  --fin-muted: var(--c-muted);
  --fin-border: var(--c-border);

  --fin-panel-bg: var(--panel-bg);
  --fin-panel-head-bg: var(--panel-head-bg);
  --fin-panel-inner-bg: var(--panel-inner-bg);

  --fin-hover-bg: var(--hover-soft);
  --fin-hover-bd: color-mix(in srgb, var(--c-border) 82%, #000);

  --fin-blue: var(--c-accent);
  --fin-danger: var(--c-danger);
  --fin-success: var(--c-success);
}

/* =========================================================
   DARK MODE
========================================================= */
:root[data-theme="dark"]{
  /* neutros (dark) */
  --n-0:   #0b1220;
  --n-50:  #0f172a;
  --n-100: #0b1220;
  --n-150: #111b2f;
  --n-200: #1b2a46;
  --n-300: #2a3a5b;

  /* texto */
  --n-600: #b6c2d9;
  --n-800: #e1e7f5;
  --n-900: #f1f5ff;

  /* semantic */
  --c-bg:        var(--n-100);

  /* Mesa/backdrop (dark) */
  --c-backdrop:  var(--n-100);
  /* ✅ Mesa mais perceptível no DARK (sem perder contraste do texto) */
  --c-backdrop-grad:
    radial-gradient(1200px 760px at 18% -12%, color-mix(in srgb, var(--c-accent) 18%, transparent), transparent 58%),
    radial-gradient(980px 640px at 90% 6%,  rgba(255,255,255,0.08), transparent 64%),
    radial-gradient(900px 520px at 50% 120%, rgba(255,255,255,0.05), transparent 68%),
    linear-gradient(180deg, var(--n-100) 0%, color-mix(in srgb, var(--n-50) 46%, var(--n-100)) 100%);

   --shadow-soft:   0 10px 26px rgba(0,0,0,0.40);
   --shadow-soft-2: 0 16px 40px rgba(0,0,0,0.55);

   /* depth/stroke no dark */
  --elev-1: var(--shadow-soft);
  --elev-2: var(--shadow-soft-2);
  --stroke-soft: color-mix(in srgb, var(--c-border) 72%, #000);

  --c-surface:   color-mix(in srgb, var(--n-50) 92%, #000);
  --c-surface-2: color-mix(in srgb, var(--n-50) 78%, #000);

  --c-text:      var(--n-900);
  --c-muted:     var(--n-600);

  --c-heading:   var(--n-900);
  --c-on-accent: #ffffff;
  --c-soft:      color-mix(in srgb, var(--n-150) 62%, #000);

  --c-border:    color-mix(in srgb, var(--n-300) 65%, #000);
  --c-border-2:  color-mix(in srgb, var(--n-300) 45%, #000);

  /* panels / tables */
  --panel-bg:        var(--c-surface);
  --panel-head-bg:   color-mix(in srgb, var(--n-150) 78%, #000);
  --panel-inner-bg:  color-mix(in srgb, var(--n-150) 60%, #000);
  --panel-foot-bg:   color-mix(in srgb, var(--n-150) 70%, #000);

  /* UX PADRÃO 2 no dark (mantém leitura e leve destaque visual) */
  --ux2-surface: color-mix(in srgb, var(--panel-bg) 92%, rgba(255,255,255,0.04));
  --ux2-head:    color-mix(in srgb, var(--panel-head-bg) 90%, rgba(255,255,255,0.05));
  --ux2-inner:   color-mix(in srgb, var(--panel-inner-bg) 90%, rgba(255,255,255,0.04));
  --ux2-foot:    color-mix(in srgb, var(--panel-foot-bg) 90%, rgba(255,255,255,0.05));
  --ux2-hover:   color-mix(in srgb, var(--hover-soft) 90%, rgba(255,255,255,0.06));
  --ux2-avatar-bg: color-mix(in srgb, var(--c-accent) 40%, #fff);

  --hover-soft: color-mix(in srgb, var(--n-200) 70%, #000);

  --table-head-bg: color-mix(in srgb, var(--n-150) 72%, #000);
  --table-row-a:  color-mix(in srgb, var(--n-150) 52%, #000);
  --table-row-b:  color-mix(in srgb, var(--n-150) 42%, #000);

  /* botões ghost no dark */
  --btn-ghost-bg: color-mix(in srgb, var(--n-150) 70%, #000);
  --btn-ghost-text: color-mix(in srgb, var(--c-text) 92%, #000);
  --btn-ghost-border: color-mix(in srgb, var(--c-border) 70%, #000);

  /* Toast no dark: contraste reforçado e borda mais visível */
  --toast-bg: color-mix(in srgb, #060b16 90%, var(--c-surface));
  --toast-text: #f7f9ff;
  --toast-border: color-mix(in srgb, var(--c-border) 82%, #000);

  --toast-success-bg: color-mix(in srgb, var(--c-success) 80%, #03120c);
  --toast-success-border: color-mix(in srgb, var(--c-success) 42%, var(--c-border));

  --toast-warning-bg: color-mix(in srgb, var(--c-warning) 82%, #120d03);
  --toast-warning-border: color-mix(in srgb, var(--c-warning) 42%, var(--c-border));

  --toast-error-bg: color-mix(in srgb, var(--c-danger) 80%, #140607);
  --toast-error-border: color-mix(in srgb, var(--c-danger) 42%, var(--c-border));

  --toast-info-bg: color-mix(in srgb, var(--c-accent) 78%, #050914);
  --toast-info-border: color-mix(in srgb, var(--c-accent) 42%, var(--c-border));

  /* shadows mais fortes no dark */
  --shadow-soft:   0 10px 26px rgba(0,0,0,0.40);
  --shadow-soft-2: 0 16px 40px rgba(0,0,0,0.55);

  /* aliases (recalcula) */
  --fin-bg: var(--c-bg);
  --fin-text: var(--c-text);
  --fin-muted: var(--c-muted);
  --fin-border: var(--c-border);

  --fin-panel-bg: var(--panel-bg);
  --fin-panel-head-bg: var(--panel-head-bg);
  --fin-panel-inner-bg: var(--panel-inner-bg);

  --fin-hover-bg: var(--hover-soft);
  --fin-hover-bd: color-mix(in srgb, var(--c-border) 78%, var(--n-0));
}

/* exemplos existentes */
/* :root[data-theme="visa"]{
  --c-accent: var(--brand-red);
  --sidebar-bg: var(--sidebar-bg);
}
:root[data-accent="blue"]{
  --c-accent: #2563eb;
} */

:root[data-accent="visa"]{
  --c-accent: var(--brand-red);
}

:root[data-accent="blue"]{
  --c-accent: #2563eb;
}

:root[data-accent="green"]{
  --c-accent: #16a34a;
}

:root[data-accent="purple"]{
  --c-accent: #7c3aed;
}

:root[data-accent="orange"]{
  --c-accent: #f97316;
}

:root[data-accent="slate"]{
  --c-accent: #334155;
}

/* =========================================================
   ACCENTS (presets)
   - Controlado por :root[data-accent="..."]
   - Mantém dark intacto (tokens derivados já se adaptam)
========================================================= */

:root[data-accent="red"]   { --c-accent: #a42d2d; }
:root[data-accent="blue"]  { --c-accent: #2563eb; }
:root[data-accent="green"] { --c-accent: #16a34a; }
:root[data-accent="amber"] { --c-accent: #d97706; }
:root[data-accent="purple"]{ --c-accent: #7c3aed; }
:root[data-accent="teal"]  { --c-accent: #0d9488; }
:root[data-accent="slate"] { --c-accent: #334155; }

/* (opcional) “accent-2” sempre derivado do accent principal */
:root{
  --c-accent-2: color-mix(in srgb, var(--c-accent) 78%, var(--n-0));
}

/* =========================================================
   PRINT/PDF MODE
   - Força documento claro usando tokens (não hex solto no CSS das páginas)
========================================================= */
@media print{
  :root{
    --c-bg: #ffffff;

    /* backdrop também forçado para branco no print */
    --c-backdrop: #ffffff;
    --c-backdrop-grad: #ffffff;

    --c-surface: #ffffff;
    --c-surface-2: #ffffff;

    --c-text: #0b1220;
    --c-muted: #5b6476;

    --c-heading: #0b1220;
    --c-soft: #ffffff;

    --c-border: rgba(11,18,32,.12);
    --c-border-2: rgba(11,18,32,.08);

    --panel-bg: #ffffff;
    --panel-head-bg: #f3f5f9;
    --panel-inner-bg: #f9fafc;
    --panel-foot-bg: #f3f5f9;

    --table-head-bg: #f3f5f9;
    --table-row-a: #ffffff;
    --table-row-b: #fbfcff;
  }
}

/* theme.css (ou global.css, se preferir) */
:root{
  /* ✅ padrão novo: cards deixam a “mesa” aparecer */
  --surface-card: transparent;

  /* opcional: se quiser um véu mínimo no futuro (deixe comentado)
  --surface-card: rgba(255,255,255,0.02);
  */
}