/* =============================================================================
   Maestro Workflow · Design Tokens (v2 — neutral / corporate)
   -----------------------------------------------------------------------------
   Estratégia: paleta neutra premium (slate + azul corporativo discreto).
   O branding do tenant SOBRESCREVE --color-primary / --primary via CSS injetado
   pelo BrandingLoadFilter — quem define o "sotaque" da cor é o tenant; o sistema
   por padrão é sóbrio e profissional.

   ★ COMPATIBILIDADE: este arquivo expõe DOIS vocabulários:
     1. Vocabulário moderno (alinhado ao MaestroDocument):
        --color-primary, --bg-surface, --space-*, --font-size-*, --radius, etc.
     2. Vocabulário legado do Workflow (mantém todo CSS existente funcionando):
        --primary, --surface, --sp-*, --fs-*, --radius-md, --shadow-*,
        --brand-gradient, --surface-glass, --shadow-primary, --ring, etc.

   Ambos apontam para os MESMOS valores neutros. A migração das páginas pode
   ser gradual sem nenhum break.
   ============================================================================= */

:root {
    color-scheme: light dark;

    /* ==================================================================
       1. PALETA NEUTRA (slate refinado — base de tudo)
       ================================================================== */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    /* Aliases gray-* (compat com vocabulário Document) */
    --color-gray-50:  var(--slate-50);
    --color-gray-100: var(--slate-100);
    --color-gray-200: var(--slate-200);
    --color-gray-300: var(--slate-300);
    --color-gray-400: var(--slate-400);
    --color-gray-500: var(--slate-500);
    --color-gray-600: var(--slate-600);
    --color-gray-700: var(--slate-700);
    --color-gray-800: var(--slate-800);
    --color-gray-900: var(--slate-900);

    /* ==================================================================
       2. PRIMÁRIO — azul corporativo discreto
       (tenant override CSS substitui --color-primary; tudo deriva daí)
       ================================================================== */
    --color-primary-50:  #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
    --color-primary:        var(--color-primary-600);
    --color-primary-hover:  var(--color-primary-700);
    --color-primary-active: var(--color-primary-800);
    --color-primary-light:  var(--color-primary-50);
    --color-primary-subtle: #f5f8ff;
    --color-primary-rgb:    37, 99, 235;

    /* Família indigo legada (mantida só pra não quebrar referências
       diretas — ex.: --primary-500 em CSS de página). Mapeia pro azul. */
    --primary-50:  var(--color-primary-50);
    --primary-100: var(--color-primary-100);
    --primary-200: var(--color-primary-200);
    --primary-300: var(--color-primary-300);
    --primary-400: var(--color-primary-400);
    --primary-500: var(--color-primary-500);
    --primary-600: var(--color-primary-600);
    --primary-700: var(--color-primary-700);
    --primary-800: var(--color-primary-800);
    --primary:     var(--color-primary);

    /* Gradientes — agora discretos, monocromáticos no primário.
       Uso reservado para acentos pontuais (logo placeholder, hero).
       NÃO usar em botões / barras laterais. */
    --brand-gradient:      linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-500) 100%);
    --brand-gradient-soft: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);

    /* ==================================================================
       3. SEMÂNTICAS (status, alerts, badges)
       ================================================================== */
    --color-success:        #16a34a;
    --color-success-hover:  #15803d;
    --color-success-light:  #dcfce7;
    --color-success-dark:   #166534;
    --color-success-rgb:    22, 163, 74;

    --color-warning:        #d97706;
    --color-warning-hover:  #b45309;
    --color-warning-light:  #fef3c7;
    --color-warning-dark:   #92400e;
    --color-warning-rgb:    217, 119, 6;

    --color-danger:         #dc2626;
    --color-danger-hover:   #b91c1c;
    --color-danger-light:   #fee2e2;
    --color-danger-dark:    #991b1b;
    --color-danger-rgb:     220, 38, 38;

    --color-info:           #0ea5e9;
    --color-info-hover:     #0284c7;
    --color-info-light:     #e0f2fe;
    --color-info-dark:      #075985;
    --color-info-rgb:       14, 165, 233;

    /* Aliases curtos (vocabulário legado Workflow) */
    --success:        var(--color-success);
    --success-strong: var(--color-success-hover);
    --success-bg:     var(--color-success-light);
    --warning:        var(--color-warning);
    --warning-strong: var(--color-warning-hover);
    --warning-bg:     var(--color-warning-light);
    --danger:         var(--color-danger);
    --danger-strong:  var(--color-danger-hover);
    --danger-bg:      var(--color-danger-light);
    --info:           var(--color-info);
    --info-bg:        var(--color-info-light);

    /* Accents extras (compat: usados em badges custom de status) */
    --accent-cyan:    #06b6d4;
    --accent-emerald: #10b981;
    --accent-amber:   #f59e0b;
    --accent-rose:    #f43f5e;
    --accent-violet:  #8b5cf6;

    /* ==================================================================
       4. SUPERFÍCIES (background, cards, overlays)
       ================================================================== */
    --bg-body:             #f7f8fa;
    --bg-surface:          #ffffff;
    --bg-surface-elevated: #ffffff;
    --bg-surface-alt:      var(--slate-50);
    --bg-surface-inset:    var(--slate-100);
    --bg-hover:            var(--slate-100);
    --bg-active:           var(--slate-200);
    --bg-disabled:         var(--slate-100);

    /* Aliases legados Workflow */
    --surface:        var(--bg-surface);
    --surface-alt:    var(--bg-surface-alt);
    --surface-inset:  var(--bg-surface-inset);
    --surface-hover:  var(--color-primary-50);
    --surface-muted:  var(--slate-50);
    --surface-glass:  rgba(255, 255, 255, 0.78);
    --page-bg:        var(--bg-body);
    /* Background sutil — sem gradientes coloridos vibrantes.
       Apenas um overlay quase imperceptível para dar profundidade. */
    --page-bg-image:  radial-gradient(1200px 600px at 100% -10%, rgba(37, 99, 235, 0.04), transparent 60%),
                      radial-gradient(900px 500px at -10% 110%, rgba(15, 23, 42, 0.025), transparent 55%);

    /* Bg aliases utilitários */
    --bg-white: var(--bg-surface);

    /* ==================================================================
       5. BORDAS
       ================================================================== */
    --border-color:        var(--slate-200);
    --border-color-light:  #eef0f4;
    --border-color-strong: var(--slate-300);
    --border-color-focus:  var(--color-primary);

    /* Aliases legados */
    --border:         var(--border-color);
    --border-light:   var(--border-color-light);
    --border-subtle:  var(--border-color-light);
    --border-strong:  var(--border-color-strong);
    --border-focus:   var(--border-color-focus);

    /* ==================================================================
       6. TIPOGRAFIA
       ================================================================== */
    --text-primary:     var(--slate-900);
    --text-secondary:   var(--slate-700);
    --text-tertiary:    var(--slate-500);
    --text-placeholder: var(--slate-400);
    --text-disabled:    var(--slate-300);
    --text-muted:       var(--slate-400);
    --text-inverse:     #ffffff;
    --text-on-primary:  #ffffff;
    --text-link:        var(--color-primary);
    --text-link-hover:  var(--color-primary-hover);

    /* Famílias — Inter como padrão (mais "fintech/SaaS" moderno),
       mantemos Roboto disponível como fallback. */
    --font-family-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-mono:    'JetBrains Mono', 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
    /* Aliases curtos legados */
    --font-sans:    var(--font-family-sans);
    --font-display: var(--font-family-display);
    --font-mono:    var(--font-family-mono);

    /* Sizes — escala dupla: rem (Document) e px (Workflow legado) */
    --font-size-2xs:  0.6875rem;  /* 11px */
    --font-size-xs:   0.75rem;    /* 12px */
    --font-size-sm:   0.8125rem;  /* 13px */
    --font-size-base: 0.875rem;   /* 14px */
    --font-size-md:   1rem;       /* 16px */
    --font-size-lg:   1.125rem;   /* 18px */
    --font-size-xl:   1.25rem;    /* 20px */
    --font-size-2xl:  1.5rem;     /* 24px */
    --font-size-3xl:  1.875rem;   /* 30px */
    --font-size-4xl:  2.25rem;    /* 36px */
    --font-size-5xl:  3rem;       /* 48px */
    --font-size-13:   0.8125rem;  /* 13px (compat Document) */
    /* Legados px */
    --fs-2xs: 11px;
    --fs-xs:  12px;
    --fs-sm:  13px;
    --fs-base:14px;
    --fs-md:  15px;
    --fs-lg:  17px;
    --fs-xl:  20px;
    --fs-2xl: 24px;
    --fs-3xl: 30px;
    --fs-4xl: 36px;

    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:   1.2;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.75;
    --lh-tight:  var(--line-height-tight);
    --lh-normal: var(--line-height-normal);

    /* ==================================================================
       7. ESPAÇAMENTO (escala consistente)
       ================================================================== */
    --space-0:  0;
    --space-1:  0.25rem;  /*  4px */
    --space-2:  0.5rem;   /*  8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-7:  1.75rem;  /* 28px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    /* Aliases legados (sp-* em px) */
    --sp-0: 0;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 28px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* ==================================================================
       8. RAIOS — discretos, profissionais (sem cantos exagerados)
       ================================================================== */
    --radius-none: 0;
    --radius-xs:   3px;
    --radius-sm:   4px;
    --radius:      6px;     /* default — usado por inputs, badges */
    --radius-md:   8px;     /* default — cards, buttons */
    --radius-lg:   12px;    /* containers, modals */
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-3xl:  24px;
    --radius-full: 9999px;

    /* ==================================================================
       9. SOMBRAS — neutras, cinza-azuladas, suaves
       ================================================================== */
    --shadow-none: none;
    --shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow:      0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 8px rgba(15, 23, 42, 0.04);
    --shadow-md:   0 4px 8px rgba(15, 23, 42, 0.06), 0 8px 16px rgba(15, 23, 42, 0.06);
    --shadow-lg:   0 8px 16px rgba(15, 23, 42, 0.08), 0 16px 32px rgba(15, 23, 42, 0.06);
    --shadow-xl:   0 12px 24px rgba(15, 23, 42, 0.10), 0 24px 48px rgba(15, 23, 42, 0.08);
    --shadow-2xl:  0 20px 40px rgba(15, 23, 42, 0.14), 0 32px 64px rgba(15, 23, 42, 0.10);

    /* Sombras com cor primária — usadas só em botões primários (sutis) */
    --shadow-primary:    0 4px 12px -2px rgba(37, 99, 235, 0.25);
    --shadow-primary-sm: 0 2px 6px -1px rgba(37, 99, 235, 0.20);

    /* Sombra de input/dropdown */
    --shadow-input:           inset 0 1px 0 rgba(15, 23, 42, 0.02);
    --shadow-dropdown-strong: 0 4px 16px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(15, 23, 42, 0.05);

    /* Focus ring — usa primário do tenant (override automático) */
    --shadow-focus:        0 0 0 3px rgba(37, 99, 235, 0.20);
    --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.20);
    --ring:                var(--shadow-focus);
    --ring-danger:         var(--shadow-focus-danger);

    /* ==================================================================
       10. TRANSIÇÕES
       ================================================================== */
    --transition-fast:   100ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition:        180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 450ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition-colors:    color var(--transition), background-color var(--transition), border-color var(--transition);
    --transition-transform: transform var(--transition);
    --transition-opacity:   opacity var(--transition);
    --transition-shadow:    box-shadow var(--transition);
    --transition-all:       all var(--transition);

    /* ==================================================================
       11. Z-INDEX (escala sem mágica numérica)
       ================================================================== */
    --z-dropdown:        100;
    --z-sticky:          200;
    --z-fixed:           300;
    --z-sidebar:         400;
    --z-modal-backdrop:  500;
    --z-modal:           600;
    --z-popover:         700;
    --z-tooltip:         800;
    --z-notification:    900;
    --z-max:            9999;

    /* ==================================================================
       12. LAYOUT (shell)
       ================================================================== */
    --sidebar-width:           260px;
    --sidebar-width-collapsed: 68px;
    --sidebar-collapsed-width: var(--sidebar-width-collapsed);
    --sidebar-collapsed:       var(--sidebar-width-collapsed);
    --header-height:           60px;
    --footer-height:           56px;
    --content-max-width:       1440px;

    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;

    /* ==================================================================
       13. COMPONENTES (alturas fixas para alinhamento)
       ================================================================== */
    --btn-height-sm: 30px;
    --btn-height:    36px;
    --btn-height-lg: 44px;

    --input-height-sm: 30px;
    --input-height:    36px;
    --input-height-lg: 44px;

    --modal-width-sm:   400px;
    --modal-width:      540px;
    --modal-width-lg:   720px;
    --modal-width-xl:   900px;
    --modal-width-full: calc(100vw - 64px);

    --sidebar-panel-min-width:     200px;
    --sidebar-panel-max-width:     600px;
    --sidebar-panel-default-width: 320px;

    /* ==================================================================
       14. OVERLAYS
       ================================================================== */
    --overlay-backdrop:   rgba(15, 23, 42, 0.50);
    --overlay-light:      rgba(15, 23, 42, 0.30);
    --overlay-dark-90:    rgba(0, 0, 0, 0.90);
    --overlay-white-80:   rgba(255, 255, 255, 0.80);
    --overlay-white-22:   rgba(255, 255, 255, 0.22);
    --overlay-white-20:   rgba(255, 255, 255, 0.20);
    --overlay-white-12:   rgba(255, 255, 255, 0.12);
    --overlay-white-10:   rgba(255, 255, 255, 0.10);
    --overlay-white-08:   rgba(255, 255, 255, 0.08);
    --overlay-black-15:   rgba(15, 23, 42, 0.15);
    --overlay-black-12:   rgba(15, 23, 42, 0.12);
    --overlay-black-10:   rgba(15, 23, 42, 0.10);
    --overlay-black-08:   rgba(15, 23, 42, 0.08);
    --overlay-black-06:   rgba(15, 23, 42, 0.06);
    --overlay-black-05:   rgba(15, 23, 42, 0.05);
    --overlay-black-04:   rgba(15, 23, 42, 0.04);

    /* ==================================================================
       15. EXTRAS específicos (compat com páginas atuais)
       ================================================================== */
    /* Builder canvas */
    --canvas-bg:               var(--slate-50);
    --canvas-paper-bg:         #ffffff;
    --canvas-grid:             var(--slate-300);
    --canvas-grid-alt:         var(--slate-400);
    --canvas-text-muted:       var(--slate-500);
    --canvas-overlay-light:    rgba(248, 250, 252, 0.70);
    --canvas-overlay-light-2:  rgba(248, 250, 252, 0.50);
    --canvas-border-subtle:    rgba(15, 23, 42, 0.04);
    --canvas-border-focus:     rgba(37, 99, 235, 0.25);
    --canvas-shadow-focus:     0 0 0 3px rgba(37, 99, 235, 0.10);
}

/* =============================================================================
   DARK THEME
   ----------------------------------------------------------------------------- */
:root[data-mw-theme="dark"],
:root[data-theme="dark"] {
    /* Surfaces */
    --bg-body:             #0b1220;
    --bg-surface:          #111827;
    --bg-surface-elevated: #1a2233;
    --bg-surface-alt:      #131c2e;
    --bg-surface-inset:    #0e1626;
    --bg-hover:            #1e293b;
    --bg-active:           #273449;
    --bg-disabled:         #131c2e;
    --surface:        var(--bg-surface);
    --surface-alt:    var(--bg-surface-alt);
    --surface-inset:  var(--bg-surface-inset);
    --surface-hover:  var(--bg-hover);
    --surface-muted:  var(--bg-surface-alt);
    --surface-glass:  rgba(17, 24, 39, 0.78);
    --page-bg:        var(--bg-body);
    --page-bg-image:  radial-gradient(1200px 600px at 100% -10%, rgba(37, 99, 235, 0.10), transparent 60%),
                      radial-gradient(900px 500px at -10% 110%, rgba(14, 165, 233, 0.06), transparent 55%);

    /* Borders */
    --border-color:        #1f2b44;
    --border-color-light:  #172037;
    --border-color-strong: #334155;
    --border:        var(--border-color);
    --border-light:  var(--border-color-light);
    --border-subtle: var(--border-color-light);
    --border-strong: var(--border-color-strong);

    /* Text */
    --text-primary:     #f1f5f9;
    --text-secondary:   #cbd5e1;
    --text-tertiary:    #94a3b8;
    --text-placeholder: #8b98ae;
    --text-disabled:    #5c6b82;
    --text-muted:       #8b98ae;
    --text-inverse:     #0f172a;
    --text-on-primary:  #ffffff;
    --text-link:        #7cb8ff;
    --text-link-hover:  #a5d0ff;
    --color-link:       var(--text-link);

    /* Semânticos light backgrounds (com alpha — funciona em dark) */
    --color-success-light: rgba(22, 163, 74, 0.18);
    --color-warning-light: rgba(217, 119, 6, 0.18);
    --color-danger-light:  rgba(220, 38, 38, 0.18);
    --color-info-light:    rgba(14, 165, 233, 0.18);
    --success-bg: var(--color-success-light);
    --warning-bg: var(--color-warning-light);
    --danger-bg:  var(--color-danger-light);
    --info-bg:    var(--color-info-light);

    /* Primário pop-out no dark */
    --color-primary-light: rgba(37, 99, 235, 0.18);
    --color-primary-50:    rgba(37, 99, 235, 0.12);
    --color-primary-100:   rgba(37, 99, 235, 0.18);
    --primary-50:  var(--color-primary-50);
    --primary-100: var(--color-primary-100);

    /* Sombras mais fortes em dark (sem profundidade visual ficaria flat) */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow:     0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg:  0 12px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.6);
    --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.7);
    --shadow-primary:    0 6px 16px -3px rgba(37, 99, 235, 0.45);
    --shadow-primary-sm: 0 3px 8px -2px rgba(37, 99, 235, 0.35);
    --shadow-dropdown-strong: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);

    /* Canvas builder em dark */
    --canvas-bg:        #0b1220;
    --canvas-paper-bg:  #131c2e;
    --canvas-grid:      #1f2b44;
    --canvas-grid-alt:  #273449;

    /* Overlays */
    --overlay-backdrop: rgba(0, 0, 0, 0.65);
    --overlay-white-80: rgba(17, 24, 39, 0.80);

    /* Brand gradient soft pra dark */
    --brand-gradient-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.18) 0%, rgba(14, 165, 233, 0.12) 100%);
}