/* ============================================
   DESIGN TOKENS — Custom Properties
   NewCo SaaS Hub
   ============================================ */

:root {
    /* --- Typography --- */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /*
     * Typography Scale — WCAG 2.1 AA + ABNT NBR 17060 compliant
     * Minimum body text: 14px (0.875rem)
     * Minimum secondary: 12px (0.75rem)
     * Icons/badges only: 11px (0.6875rem)
     * NEVER below 11px for any readable text
     */
    --text-2xs: 0.75rem;    /* 12px — badges, labels only */
    --text-xs: 0.8125rem;   /* 13px — secondary text, hints */
    --text-sm: 0.9375rem;   /* 15px — body text (ABNT min 14px) */
    --text-base: 1rem;      /* 16px — default body */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-black: 900;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* --- Spacing --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* --- Border Radius --- */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* --- Transitions --- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* --- Layout --- */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 72px;
    --header-height: 64px;
    --drawer-height: 64px;
    --max-content-width: 1280px;

    /* --- Shorthand Aliases (used across views) --- */
    --radius: var(--radius-md);

    /* --- Z-Index Scale --- */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-pwa-banner: 600;
    --z-ia-widget: 700;
    --z-impersonate: 800;
    --z-cookie-banner: 900;
    --z-emergency: 9999;
}

/* ============================================
   LIGHT THEME (default)
   ============================================ */
/* :root = DARK default (REFACTOR-DARK-DEFAULT 2026-04-19).
   Light permanece disponível via [data-theme="light"] para toggle futuro. */
:root {
    /* Brand — Âmbar CTA no escuro (texto escuro via --color-text-inverse = AAA) */
    --color-primary: #E89126;

    /* RDV-ADS-RENTABILIDADE-001 — série do gráfico de Ads. Validados nas seis checagens do
       validador de paleta (banda de luminância, croma, separação CVD, piso de visão normal,
       contraste): claro passa com #E89126; escuro FALHA com ele e exige o passo mais escuro
       da mesma rampa. Tema escuro precisa dos próprios degraus, nunca do mesmo hex. */
    --chart-investimento: #E89126;
    --chart-receita: #8b5cf6;
    --color-primary-hover: #F0A445;
    --color-primary-light: rgba(232, 145, 38, 0.16);
    --color-primary-dark: #C9760F;

    --color-secondary: #8b5cf6;
    --color-secondary-hover: #a78bfa;
    --color-secondary-light: rgba(139, 92, 246, 0.15);

    /* Semantic */
    --color-success: #16a34a;  /* AA branco-sobre 3.3 + verde-texto 6.0; alinhado ao light — auditoria 2026-06-11 */
    --color-success-light: rgba(34, 197, 94, 0.15);
    --color-warning: #f59e0b;
    --color-warning-light: rgba(245, 158, 11, 0.15);
    --color-danger: #ef4444;
    --color-danger-light: rgba(239, 68, 68, 0.15);
    --color-info: #06b6d4;
    --color-info-light: rgba(6, 182, 212, 0.15);

    /* RDV-EXPED-TOKENS-TEXT-001 (Onda 4 P2): versão TEXTO dos semânticos — pra escrever SOBRE os
       fundos tintados (*-light). Os sólidos acima são fundo/ícone; usados como texto no escuro
       reprovavam AA (--color-info 06b6d4 e success 16a34a na auditoria da expedição 13/08). */
    --color-success-text: #4ade80;
    --color-warning-text: #fbbf24;
    --color-danger-text:  #f87171;
    --color-info-text:    #22d3ee;

    /* Surfaces — dark default */
    --color-bg: #0B1B33;
    --color-bg-alt: #0F2342;
    --color-surface: #14294A;
    --color-surface-hover: #1B335A;
    --color-surface-active: #24406B;
    --color-surface-raised: #14294A;

    /* Text — WCAG 2.1 AA on --color-bg (#09090b) */
    --color-text: #F2F5FA;            /* 18.2:1 ✅ */
    --color-text-secondary: #B3C4DD;  /* 7.16:1 vs surface — AAA (auditoria 2026-06-11) */
    --color-text-muted: #A4B7D2;      /* 4.78:1 vs surface — AA (auditoria 2026-06-11) */
    --color-text-inverse: #0f172a;
    --color-text-on-overlay: #fff;    /* Texto sobre overlay escuro deliberado (rgba(0,0,0,..)) */
    --color-text-on-dark-bg: #000;    /* Texto preto sobre amarelo/warning (contraste) */
}

/* LIGHT THEME — disponível via [data-theme="light"] */
[data-theme="light"] {
    /* Brand — Navy (CTA AAA, branco-sobre ~13:1) */
    --color-primary: #0F3060;
    --color-primary-hover: #0B2247;
    --color-primary-light: #DCE4F0;
    --color-primary-dark: #081A38;

    --color-secondary: #8b5cf6;
    --color-secondary-hover: #7c3aed;
    --color-secondary-light: #ede9fe;

    /* Semantic */
    --color-success: #16a34a;
    --color-success-light: #dcfce7;
    --color-warning: #d97706;
    --color-warning-light: #fef3c7;
    --color-danger: #dc2626;
    --color-danger-light: #fee2e2;
    --color-info: #0891b2;
    --color-info-light: #cffafe;

    /* RDV-EXPED-TOKENS-TEXT-001: texto semântico sobre os pastéis *-light (claro = tons escuros). */
    /* RDV-A11Y-CONTRASTE-001 (28/08/2026): era #15803d, que dava 4,02–4,36:1 sobre os pastéis
       verdes (#dcead9, #e7ede1, #e1f4e5) — abaixo dos 4,5:1 do AA, e a única regressão do tema
       claro contra o escuro (a página /contato). #146c33 sobe para 5,22–5,67:1 nos mesmos fundos
       e continua legível como verde. Medido, não estimado. */
    --color-success-text: #146c33;
    --color-warning-text: #92400e;
    --color-danger-text:  #b91c1c;
    --color-info-text:    #155e75;

    /* Surfaces */
    --color-bg: #F1EEE7;
    --color-bg-alt: #E7E2D8;
    --color-surface: #FBFAF7;
    --color-surface-hover: #F2EEE6;
    --color-surface-active: #EBE6DB;
    --color-surface-raised: #FBFAF7;

    /* Text — WCAG 2.1 AA on #f8fafc */
    --color-text: #0B1220;
    --color-text-secondary: #36414F;
    --color-text-muted: #434B57;
    --color-text-inverse: #ffffff;
    --color-text-on-overlay: #fff;    /* Texto sobre overlay escuro deliberado */
    --color-text-on-dark-bg: #000;    /* Texto preto sobre amarelo/warning */

    /* Borders */
    --color-border: #E0DACE;
    --color-border-hover: #D2CABA;
    --color-border-focus: #0F3060;

    /* Sidebar — Clean Claro (Design Language v2) */
    --sidebar-bg: #f7f8fb;                        /* claro arejado (combina c/ logo dark-text) */
    --sidebar-text: #475569;                      /* slate-600 — AA+ */
    --sidebar-text-active: #1e293b;               /* hover / cabeçalhos de seção */
    --sidebar-hover: rgba(15, 23, 42, 0.05);      /* overlay escuro sutil */
    --sidebar-active: rgba(232, 145, 38, 0.16);   /* fallback; ativo usa pílula sólida (ver sidebar.css) */
    --sidebar-accent: #E89126;                    /* âmbar Rally (acento decorativo) */
    --sidebar-accent-glow: rgba(232, 145, 38, 0.30);
    --sidebar-divider: rgba(15, 23, 42, 0.08);    /* divisor escuro sobre claro */

    /* Input */
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-focus-border: #0F3060;
    --input-focus-ring: rgba(15, 48, 96, 0.30);
    --input-placeholder: #6b7280;      /* 4.66:1 ✅ AA (era #9ca3af = 2.84:1 ❌) */

    /* Focus ring (WCAG 2.4.7 Focus Visible) */
    --focus-ring: 0 0 0 3px rgba(15, 48, 96, 0.55);
    --focus-outline: 2px solid #0F3060;

    /* Scrollbar */
    --scrollbar-track: #f1f5f9;
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;

    /* --- Shorthand Aliases (views use these without color- prefix) --- */
    --primary: var(--color-primary);
    --primary-bg: var(--color-primary-light);
    --success: var(--color-success);
    --success-bg: var(--color-success-light);
    --warning: var(--color-warning);
    --warning-bg: var(--color-warning-light);
    --danger: var(--color-danger);
    --danger-bg: var(--color-danger-light);
    --info: var(--color-info);
    --info-bg: var(--color-info-light);
    --text: var(--color-text);
    --text-muted: var(--color-text-muted);
    --text-secondary: var(--color-text-secondary);
    --surface: var(--color-surface);
    --surface-alt: var(--color-bg-alt);
    --border: var(--color-border);

    /* --- Aliases com prefixo color- para views que usam --color-info-bg etc --- */
    --color-success-bg: var(--color-success-light);
    --color-warning-bg: var(--color-warning-light);
    --color-danger-bg:  var(--color-danger-light);
    --color-info-bg:    var(--color-info-light);
    --color-primary-bg: var(--color-primary-light);
    /* Alias semântico legado: views antigas usam --color-error em vez de --color-danger */
    --color-error:       var(--color-danger);
    --color-error-light: var(--color-danger-light);
    --color-error-bg:    var(--color-danger-light);
    /* REFACTOR-TOKENS-001 (2026-05-17) — brand colors preservadas */
    --color-ml-yellow:    #FFE600;
    --color-ml-yellow-bg: rgba(255, 230, 0, 0.15);
    --color-brand-dark:   #121214;
    --color-brand-darker: #0a0a0c;
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
    /* Brand — Âmbar CTA no escuro (texto escuro via --color-text-inverse = AAA) */
    --color-primary: #E89126;
    --color-primary-hover: #F0A445;
    --color-primary-light: rgba(232, 145, 38, 0.16);
    --color-primary-dark: #C9760F;

    --color-secondary: #8b5cf6;
    --color-secondary-hover: #a78bfa;
    --color-secondary-light: rgba(139, 92, 246, 0.15);

    /* Semantic */
    --color-success: #16a34a;  /* AA branco-sobre 3.3 + verde-texto 6.0; alinhado ao light — auditoria 2026-06-11 */
    --color-success-light: rgba(34, 197, 94, 0.15);
    --color-warning: #f59e0b;
    --color-warning-light: rgba(245, 158, 11, 0.15);
    --color-danger: #ef4444;
    --color-danger-light: rgba(239, 68, 68, 0.15);
    --color-info: #06b6d4;
    --color-info-light: rgba(6, 182, 212, 0.15);

    /* RDV-EXPED-TOKENS-TEXT-001: texto semântico sobre os tintados *-light (mesmos do :root dark). */
    --color-success-text: #4ade80;
    --color-warning-text: #fbbf24;
    --color-danger-text:  #f87171;
    --color-info-text:    #22d3ee;

    /* Surfaces — dark (matches home #09090b) */
    --color-bg: #0B1B33;

    /* Ver nota no :root — no escuro o âmbar claro sai da banda (L 0.731); usa-se primary-dark. */
    --chart-investimento: #C9760F;
    --chart-receita: #8b5cf6;
    --color-bg-alt: #0F2342;
    --color-surface: #14294A;
    --color-surface-hover: #1B335A;
    --color-surface-active: #24406B;
    --color-surface-raised: #14294A;

    /* Text */
    --color-text: #F2F5FA;
    --color-text-secondary: #B3C4DD;
    --color-text-muted: #A4B7D2;
    --color-text-inverse: #0f172a;

    /* Borders */
    --color-border: #243B5E;
    --color-border-hover: #33507D;
    --color-border-focus: #6E9BDC;

    /* Sidebar — Premium Escuro (Design Language v2) */
    --sidebar-bg: #0b0e17;                        /* navy-black profundo (combina c/ logo white-text) */
    --sidebar-text: #94a3b8;                      /* slate-400 refinado */
    --sidebar-text-active: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, 0.05);
    --sidebar-active: rgba(232, 145, 38, 0.18);   /* pílula tint âmbar (acento) */
    --sidebar-accent: #E89126;                    /* âmbar (brilha no escuro) */
    --sidebar-accent-glow: rgba(232, 145, 38, 0.45);
    --sidebar-divider: rgba(255, 255, 255, 0.07);

    /* Input */
    --input-bg: #1e293b;
    --input-border: #475569;
    --input-focus-border: #6E9BDC;
    --input-focus-ring: rgba(110, 155, 220, 0.32);
    --input-placeholder: #64748b;

    /* Scrollbar */
    --scrollbar-track: #1e293b;
    --scrollbar-thumb: #475569;
    --scrollbar-thumb-hover: #64748b;

    /* Shadow adjustments */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);

    /* --- Shorthand Aliases (dark) --- */
    --primary: var(--color-primary);
    --primary-bg: var(--color-primary-light);
    --success: var(--color-success);
    --success-bg: var(--color-success-light);
    --warning: var(--color-warning);
    --warning-bg: var(--color-warning-light);
    --danger: var(--color-danger);
    --danger-bg: var(--color-danger-light);
    --info: var(--color-info);
    --info-bg: var(--color-info-light);
    --text: var(--color-text);
    --text-muted: var(--color-text-muted);
    --text-secondary: var(--color-text-secondary);
    --surface: var(--color-surface);
    --surface-alt: var(--color-bg-alt);
    --border: var(--color-border);

    /* --- Aliases com prefixo color- para views (dark theme) --- */
    --color-success-bg: var(--color-success-light);
    --color-warning-bg: var(--color-warning-light);
    --color-danger-bg:  var(--color-danger-light);
    --color-info-bg:    var(--color-info-light);
    --color-primary-bg: var(--color-primary-light);
}

/* ============================================================
   DESIGN LANGUAGE v2 (2026-06-16) — gradientes · elevação · movimento
   Aditivo e theme-aware. REGRA: usar SEMPRE estes tokens (nunca sombra/gradiente
   cravado em hex). Gradiente = tempero (hero, KPI, gamificação, CTA), nunca fundo de texto.
   ============================================================ */
:root {
    /* Movimento */
    --motion-fast: 150ms;
    --motion-base: 220ms;
    --motion-slow: 320ms;
    --ease-out:    cubic-bezier(.2, .8, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* Gradientes (cor com propósito) — base = tema ESCURO: ação = âmbar */
    --gradient-brand:      linear-gradient(135deg, #E89126 0%, #C9760F 100%);  /* ação no escuro = âmbar (texto escuro AAA) */
    --gradient-brand-soft: linear-gradient(135deg, rgba(232,145,38,.16) 0%, rgba(201,118,15,.16) 100%);
    --gradient-hero:       linear-gradient(135deg, #15407A 0%, #0B2247 100%);  /* hero navy premium */
    --gradient-cta:        linear-gradient(135deg, #F0A445 0%, #E89126 100%);  /* acento âmbar decorativo */
    --gradient-success:    linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    --gradient-tier-bronze:   linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
    --gradient-tier-prata:    linear-gradient(135deg, #475569 0%, #cbd5e1 100%);
    --gradient-tier-ouro:     linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
    --gradient-tier-diamante: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%);

    /* Elevação (sombras suaves em camadas) — base = tema escuro */
    --elevation-1: 0 1px 2px rgba(0,0,0,.35);
    --elevation-2: 0 6px 16px rgba(0,0,0,.42);
    --elevation-3: 0 16px 40px rgba(0,0,0,.52);
    --ring-focus:  0 0 0 3px rgba(110,155,220,.55);  /* navy-blue: visível no escuro */
}

[data-theme="light"] {
    /* CLARO: ação = navy (texto branco). Sombra tingida de navy, glow âmbar contido. */
    --gradient-brand:      linear-gradient(135deg, #15407A 0%, #0F3060 100%);
    --gradient-brand-soft: linear-gradient(135deg, rgba(21,64,122,.12) 0%, rgba(15,48,96,.12) 100%);
    --gradient-hero: linear-gradient(135deg, #15407A 0%, #0B2247 100%); /* hero navy premium */
    --elevation-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
    --elevation-2: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.05);
    --elevation-3: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);
    --ring-focus:  0 0 0 3px rgba(15,48,96,.45);  /* navy: visível no claro */
}

/* Acessibilidade: quem pede menos movimento, zera as durações */
@media (prefers-reduced-motion: reduce) {
    :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; }
}

/* ============================================================
   TIPOGRAFIA — títulos em Plus Jakarta Sans (display), corpo em Inter
   (RDV-REDESIGN-FONT-001). Corpo continua --font-family no body.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4,
.page-title, .card-title, .section-title, .kpi-value, .stat-value {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}