/**
 * KonjacHub - CSS Variables
 * Paleta de Cores da Marca Konjac Massa
 */

:root {
    /* ========== CORES PRIMÁRIAS - ROXO KONJAC ========== */
    --primary-purple: #7f2595;       /* Roxo principal da marca */
    --primary-purple-hover: #6a1f7d; /* Roxo hover */
    --primary-purple-soft: rgba(127, 37, 149, 0.08); /* Fundo soft para chips */
    --secondary-purple: #9a1f7e;     /* Roxo secundário/accent */
    --secondary-purple-hover: #801968; /* Roxo secundário hover */

    /* ========== CORES DE TEXTO ==========
       text-secondary foi escurecido de #969696 para #5f6672 para
       garantir contraste WCAG AA (4.5:1) sobre fundo claro. */
    --text-primary: #1f2937;         /* Texto principal */
    --text-secondary: #5f6672;       /* Texto secundário (antes #969696) */
    --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: #f5f6f8;               /* Fundo global da aplicação (page-content) */
    --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: #7f2595;         /* VIP - Roxo principal */
    --category-vip-soft: #faf5ff;
    --category-vip-border: #e9d5ff;
    --category-frequente: #9a1f7e;   /* 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: #7f2595;
    --chart-purple-light: rgba(127, 37, 149, 0.1);
    --chart-green: #16a34a;
    --chart-yellow: #d97706;
    --chart-blue: #2563eb;
    --chart-orange: #ea580c;
    --chart-indigo: #4f46e5;

    /* ========== GRADIENTES ========== */
    --gradient-header: linear-gradient(135deg, #7f2595 0%, #6a1f7d 100%);
    --gradient-sidebar: linear-gradient(180deg, #7f2595 0%, #6b1f7f 100%);
    --gradient-card: linear-gradient(135deg, rgba(127, 37, 149, 0.05) 0%, rgba(106, 31, 125, 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(127, 37, 149, 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(127, 37, 149, 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);
}