/**
 * Fitmoda Hub - CSS Variables
 * Paleta "Força e Foco" — preto/branco com acentos (Energy Yellow / Active Olive)
 */

:root {
    /* ========== CORES PRIMÁRIAS — FITMODA "FORÇA E FOCO" ==========
       Estrutura preto/grafite. Os nomes --primary-purple/* foram mantidos
       por retrocompatibilidade; hoje carregam o preto da marca. */
    --primary-purple: #000000;       /* Fit Black — cor principal/marca */
    --primary-purple-hover: #212121; /* Carbon Grey — hover */
    --primary-purple-soft: rgba(0, 0, 0, 0.08); /* Fundo soft para chips */
    --secondary-purple: #212121;     /* Carbon Grey — secundário */
    --secondary-purple-hover: #000000; /* Fit Black — secundário hover */

    /* ========== ACENTOS FITMODA (usar com moderação) ========== */
    --accent-yellow: #FFD700;        /* Energy Yellow — CTAs, destaques, preços */
    --accent-yellow-hover: #e6c200;  /* Energy Yellow — hover */
    --accent-yellow-soft: rgba(255, 215, 0, 0.12);
    --accent-olive: #A2A871;         /* Active Olive — acento secundário suave */
    --accent-olive-soft: rgba(162, 168, 113, 0.14);

    /* ========== CORES DE TEXTO ==========
       text-secondary foi escurecido de #969696 para #5f6672 para
       garantir contraste WCAG AA (4.5:1) sobre fundo claro. */
    --text-primary: #212121;         /* Carbon Grey — texto principal */
    --text-secondary: #545454;       /* Concrete — texto secundário */
    --text-tertiary: #3c3c3c;        /* Texto terciário */
    --text-muted: #94a3b8;            /* Placeholder / hints (uso em fundo claro) */
    --text-on-dark: rgba(255, 255, 255, 0.92); /* Texto sobre fundos escuros */

    /* ========== BACKGROUNDS ========== */
    --bg-white: #ffffff;             /* Fundo branco */
    --bg-app: #f5f5f5;               /* Mist Grey — fundo global da aplicação */
    --bg-light: #fafafa;             /* Fundo claro */
    --bg-lighter: #f8f8f8;           /* Fundo mais claro */
    --bg-surface-alt: #f8fafc;        /* Surface para zebra/hover de tabelas */
    --bg-overlay: rgba(15, 23, 42, 0.55); /* Overlay para modais/drawers */

    /* ========== BORDAS ========== */
    --border-light: #e6e6e6;         /* Borda global */
    --border-medium: #c7c7c7;        /* Borda de inputs */
    --border-dark: #cbcbcb;          /* Borda escura */
    --border-subtle: #e2e8f0;        /* Borda suave de divisores */

    /* ========== CORES DE ESTADO ========== */
    --success-green: #16a34a;        /* Verde de sucesso (AA em branco) */
    --success-green-soft: #f0fdf4;
    --success-green-border: #bbf7d0;
    --success-dark: #15803d;
    --error-red: #D93333;            /* Vermelho de erro */
    --error-red-soft: #fef2f2;
    --error-red-border: #fecaca;
    --warning-yellow: #d97706;       /* Amarelo de aviso (AA em branco, antes #ffbb49) */
    --warning-yellow-soft: #fffbeb;
    --warning-yellow-border: #fde68a;
    --info-blue: #2563eb;
    --info-blue-soft: #eff6ff;
    --info-blue-border: #bfdbfe;

    /* ========== CATEGORIAS DE CLIENTES ========== */
    --category-vip: #000000;         /* VIP - Roxo principal */
    --category-vip-soft: #faf5ff;
    --category-vip-border: #e9d5ff;
    --category-frequente: #212121;   /* Frequente - Roxo escuro */
    --category-frequente-soft: #fdf4ff;
    --category-frequente-border: #f5d0fe;
    --category-regular: #16a34a;     /* Regular - Verde (ajustado para contraste) */
    --category-regular-soft: #f0fdf4;
    --category-regular-border: #bbf7d0;
    --category-primeira: #b45309;    /* Primeira compra - Âmbar escuro (contraste) */
    --category-primeira-soft: #fef3c7;
    --category-primeira-border: #fde68a;
    --category-nunca: #475569;       /* Nunca comprou - Slate (melhor que cinza) */
    --category-nunca-soft: #f1f5f9;
    --category-nunca-border: #cbd5e1;

    /* ========== GRÁFICOS E VISUALIZAÇÕES ========== */
    --chart-purple: #000000;
    --chart-purple-light: rgba(0, 0, 0, 0.1);
    --chart-green: #16a34a;
    --chart-yellow: #d97706;
    --chart-blue: #2563eb;
    --chart-orange: #ea580c;
    --chart-indigo: #4f46e5;

    /* ========== GRADIENTES ========== */
    --gradient-header: linear-gradient(135deg, #000000 0%, #212121 100%);
    --gradient-sidebar: linear-gradient(180deg, #000000 0%, #212121 100%);
    --gradient-card: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(33, 33, 33, 0.05) 100%);

    /* ========== SOMBRAS ========== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.12);
    --shadow-purple: 0 4px 12px rgba(0, 0, 0, 0.2);

    /* ========== TIPOGRAFIA ========== */
    --font-family-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, 'Cascadia Code', 'Fira Mono', monospace;

    /* ========== TRANSIÇÕES ========== */
    --transition-fast: all 0.15s ease;
    --transition-base: all 0.2s ease;
    --transition-slow: all 0.3s ease;

    /* ========== BORDER RADIUS ========== */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* ========== ESPAÇAMENTO (escala 4/8pt) ========== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ========== LAYOUT ========== */
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 80px;
    --topbar-height: 56px;

    /* ========== FOCUS RING (acessibilidade) ========== */
    --focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.45);
    --focus-ring-inverted: 0 0 0 3px rgba(255, 255, 255, 0.65);

    /* ========== CARDS (sistema unificado) ==========
       Todos os cards do produto consomem estes tokens. Mudar aqui
       propaga para: .kpi-card, .metric-card, .chart-card, .settings-card,
       .auth-card, .template-card, .glass-card, .app-modal-shell. */
    --card-bg: #ffffff;
    --card-radius: 8px;                    /* default — cards de conteúdo */
    --card-radius-sm: 8px;                 /* cards dentro de cards, chips */
    --card-border: 1px solid var(--border-subtle);
    --card-padding: var(--space-6);        /* 24px — default */
    --card-padding-sm: var(--space-4);     /* 16px — compact */
    --card-padding-lg: var(--space-10);    /* 40px — auth / hero */
    --card-accent-width: 4px;              /* barra colorida lateral */
    /* Sem sombra — estilo Airy SaaS usa só borda para delimitar cards */
    --card-shadow: none;
    --card-shadow-hover:
        0 4px 12px -2px rgba(15, 23, 42, 0.08);
    /* Motion único: curva Material standard, só em propriedades GPU-friendly. */
    --card-transition:
        transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --card-hover-lift: translateY(-2px);

    /* ========== Z-INDEX ========== */
    --z-base: 0;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-sidebar: 1040;
    --z-topbar: 1035;
    --z-overlay: 1045;
    --z-dropdown: 1050;
    --z-modal-backdrop: 1060;
    --z-modal: 1070;
    --z-popover: 1080;
    --z-tooltip: 1090;
    --z-toast: 1100;
}

/* ========== BREAKPOINTS (documentados — usar em media queries) ==========
   mobile:  até 575px
   sm:      576px+
   md:      768px+
   lg:      1024px+
   xl:      1280px+
   2xl:     1536px+
*/

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

*:focus-visible {
    outline: 2px solid var(--primary-purple);
    outline-offset: 2px;
}

/* ========== CLASSES UTILITÁRIAS ========== */

.text-primary-purple { color: var(--primary-purple); }
.text-secondary-purple { color: var(--secondary-purple); }
.text-success-green { color: var(--success-green); }
.text-error-red { color: var(--error-red); }
.text-warning-yellow { color: var(--warning-yellow); }

.bg-primary-purple { background-color: var(--primary-purple); }
.bg-secondary-purple { background-color: var(--secondary-purple); }
.bg-success-green { background-color: var(--success-green); }
.bg-error-red { background-color: var(--error-red); }
.bg-warning-yellow { background-color: var(--warning-yellow); }

.border-primary-purple { border-color: var(--primary-purple); }
.border-secondary-purple { border-color: var(--secondary-purple); }
.border-success-green { border-color: var(--success-green); }
.border-error-red { border-color: var(--error-red); }
.border-warning-yellow { border-color: var(--warning-yellow); }

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-purple);
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 0 0 var(--radius-sm) 0;
    z-index: var(--z-toast);
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 0;
    outline: none;
    box-shadow: var(--focus-ring);
}