/**
 * AMOSH System - CSS Variables
 * Arquivo centralizado de variáveis CSS para responsividade
 * Criado em: 29/11/2025
 */

:root {
    /* ===== BREAKPOINTS (Bootstrap 5 padrão) ===== */
    /* Uso: @media (min-width: 576px) {} */
    /* XS: 0-575px (Mobile pequeno - iPhone SE) */
    /* SM: 576-767px (Mobile grande - iPhone 14) */
    /* MD: 768-991px (Tablet - iPad Mini) */
    /* LG: 992-1199px (Laptop) */
    /* XL: 1200-1399px (Desktop) */
    /* XXL: 1400px+ (Desktop grande) */

    /* ===== CORES AMOSH ===== */
    --amosh-primary: #3e017a;
    --amosh-primary-light: #5d119c;
    --amosh-secondary: #a44e8d;
    --amosh-accent: #ee2cb5;
    --amosh-gradient: linear-gradient(90deg, #3e017a 0%, #a44e8d 100%);

    /* ===== TIPOGRAFIA FLUIDA ===== */
    --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);     /* 12-14px */
    --fs-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);        /* 14-16px */
    --fs-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);       /* 16-18px */
    --fs-lg: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);         /* 18-24px */
    --fs-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);         /* 24-40px */
    --fs-xxl: clamp(2rem, 1.5rem + 2.5vw, 4rem);            /* 32-64px */

    /* ===== ESPAÇAMENTOS FLUIDOS ===== */
    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);    /* 4-8px */
    --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);        /* 8-16px */
    --space-md: clamp(1rem, 0.8rem + 1vw, 2rem);            /* 16-32px */
    --space-lg: clamp(1.5rem, 1rem + 2.5vw, 4rem);          /* 24-64px */
    --space-xl: clamp(2rem, 1.5rem + 4vw, 6rem);            /* 32-96px */

    /* ===== TOUCH TARGETS (Acessibilidade) ===== */
    --touch-min: 44px;
    --touch-padding: 12px;

    /* ===== ALTURAS RESPONSIVAS PARA CONTAINERS ===== */
    --height-card-sm: min(300px, 40vh);
    --height-card-md: min(400px, 50vh);
    --height-card-lg: min(500px, 60vh);

    /* ===== SAFE AREAS (iPhone X+) ===== */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

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

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

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

/* ===== CLASSES UTILITÁRIAS DE TOUCH ===== */
.touch-target {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    padding: var(--touch-padding);
}

/* ===== CLASSES UTILITÁRIAS DE ALTURA ===== */
.height-sm {
    height: var(--height-card-sm);
    overflow-y: auto;
}

.height-md {
    height: var(--height-card-md);
    overflow-y: auto;
}

.height-lg {
    height: var(--height-card-lg);
    overflow-y: auto;
}

/* ===== SAFE AREA PADDING ===== */
.safe-top {
    padding-top: var(--safe-top);
}

.safe-bottom {
    padding-bottom: var(--safe-bottom);
}

.safe-left {
    padding-left: var(--safe-left);
}

.safe-right {
    padding-right: var(--safe-right);
}

.safe-all {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

/* ===== TIPOGRAFIA FLUIDA CLASSES ===== */
.text-fluid-xs {
    font-size: var(--fs-xs);
}

.text-fluid-sm {
    font-size: var(--fs-sm);
}

.text-fluid-base {
    font-size: var(--fs-base);
}

.text-fluid-lg {
    font-size: var(--fs-lg);
}

.text-fluid-xl {
    font-size: var(--fs-xl);
}

.text-fluid-xxl {
    font-size: var(--fs-xxl);
}

/* ===== ESPAÇAMENTOS FLUIDOS CLASSES ===== */
.gap-fluid-xs {
    gap: var(--space-xs);
}

.gap-fluid-sm {
    gap: var(--space-sm);
}

.gap-fluid-md {
    gap: var(--space-md);
}

.gap-fluid-lg {
    gap: var(--space-lg);
}

.gap-fluid-xl {
    gap: var(--space-xl);
}

/* ===== TOUCH TARGETS PARA MOBILE ===== */
@media screen and (max-width: 767.98px) {
    /* Botões com touch targets mínimos */
    .btn,
    button,
    [type="button"],
    [type="submit"],
    [type="reset"] {
        min-height: var(--touch-min);
    }

    /* Links de navegação */
    .nav-link,
    .menu-link,
    .dropdown-item {
        min-height: var(--touch-min);
        display: flex;
        align-items: center;
    }

    /* Checkboxes e radios clicáveis */
    .custom-control-label::before,
    .custom-control-label::after {
        width: 20px;
        height: 20px;
    }

    /* Aumenta área de toque em labels de checkbox/radio */
    .custom-control {
        min-height: var(--touch-min);
        padding-left: 2rem;
    }

    /* Inputs e selects */
    .form-control,
    .custom-select,
    select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="search"],
    textarea {
        min-height: var(--touch-min);
    }

    /* Menu hamburger */
    .burger-icon {
        min-width: var(--touch-min);
        min-height: var(--touch-min);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Ícones clicáveis */
    .btn-icon,
    .icon-btn,
    [class*="btn-icon"] {
        min-width: var(--touch-min);
        min-height: var(--touch-min);
    }
}