/**
 * Variáveis CSS Globais do Projeto
 * Calculadoras de Enfermagem
 * 
 * Este arquivo contém todas as variáveis CSS utilizadas pelos módulos do projeto.
 * Deve ser incluído antes dos demais arquivos CSS.
 * 
 * @version 1.0.0
 * @date 2026-01-16
 */

/* ============================================
   CORES PRINCIPAIS
   ============================================ */
:root {
    /* Cores Primárias */
    --color-primary: #1A3E74;
    --color-primary-light: #3d5a99;
    --color-primary-dark: #0d2137;
    --color-primary-hover: #152d54;
    --color-primary-active: #0a1829;

    /* Cores de Destaque (Accent) */
    --color-accent: #00bcd4;
    --color-accent-light: #6ee9ff;
    --color-accent-dark: #00838f;

    /* Cores Secundárias */
    --color-secondary: #00897b;
    --color-secondary-light: #4ebaaa;
    --color-secondary-dark: #005f56;

    /* Cores de Status */
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-error: #f44336;
    --color-info: #2196f3;

    /* Cores de Texto */
    --text-primary: #212121;
    --text-secondary: #757575;
    --text-muted: #9e9e9e;
    --text-inverse: #ffffff;
    --text-link: #1976d2;
    --text-link-hover: #1565c0;

    /* Cores de Fundo */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7fa;
    --bg-tertiary: #e8ecf1;
    --bg-inverse: #1A3E74;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-mega-panel: #ffffff;

    /* Cores de Bordas */
    --border-color: #e0e0e0;
    --border-color-light: #eeeeee;
    --border-color-dark: #bdbdbd;

    /* Cores de Sombra */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

    /* Cores de Filtros Daltonismo (aplicadas via filter) */
    --filter-protanopia: url('#protanopia-filter');
    --filter-deuteranopia: url('#deuteranopia-filter');
    --filter-tritanopia: url('#tritanopia-filter');

    /* Cores de Contraste Alto */
    --contrast-light-bg: #ffffff;
    --contrast-light-text: #000000;
    --contrast-dark-bg: #000000;
    --contrast-dark-text: #ffff00;

    /* Cores de Saturação */
    --saturation-low: saturate(50%);
    --saturation-high: saturate(150%);
    --saturation-monochrome: grayscale(100%);
}

/* ============================================
   TIPOGRAFIA
   ============================================ */
:root {
    /* Tamanhos de Fonte Base */
    --font-size-base: 16px;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 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 */

    /* Altura de Linha */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Pesos de Fonte */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Famílias de Fonte */
    --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-secondary: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-monospace: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
}

/* ============================================
   ESPAÇAMENTO
   ============================================ */
:root {
    /* Espaçamento Base (8px grid) */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    --spacing-4xl: 6rem;     /* 96px */

    /* Margens e Paddings */
    --page-padding-xs: 1rem;
    --page-padding-sm: 1.5rem;
    --page-padding-md: 2rem;
    --page-padding-lg: 3rem;
    --page-padding-xl: 4rem;

    /* Gap entre elementos */
    --gap-xs: 0.25rem;
    --gap-sm: 0.5rem;
    --gap-md: 1rem;
    --gap-lg: 1.5rem;
    --gap-xl: 2rem;
}

/* ============================================
   BORDAS E RAIOS
   ============================================ */
:root {
    /* Bordas */
    --border-width-sm: 1px;
    --border-width-md: 2px;
    --border-width-lg: 3px;

    /* Raios de Borda */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    --radius-circle: 50%;
}

/* ============================================
   Z-INDEX
   ============================================ */
:root {
    /* Z-Index Base */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;

    /* Z-Index Específicos do Projeto */
    --z-back-to-top: 900;
    --z-cookie-overlay: 950;
    --z-cookie-banner: 960;
    --z-cookie-modal: 970;
    --z-accessibility-widget: 980;
    --z-accessibility-panel: 990;
    --z-mega-panel: 1000;
    --z-mega-panel-max: 2147483647; /* MAX_INT */
    --z-mobile-menu: 9999;
    --z-mobile-menu-overlay: 9998;
}

/* ============================================
   TRANSIÇÕES E ANIMAÇÕES
   ============================================ */
:root {
    /* Durações */
    --transition-duration-fast: 150ms;
    --transition-duration-normal: 300ms;
    --transition-duration-slow: 500ms;
    --transition-duration-slower: 750ms;

    /* Easing */
    --transition-ease-linear: linear;
    --transition-ease-ease: ease;
    --transition-ease-ease-in: ease-in;
    --transition-ease-ease-out: ease-out;
    --transition-ease-ease-in-out: ease-in-out;
    --transition-ease-cubic-bezier: cubic-bezier(0.4, 0, 0.2, 1);

    /* Animações */
    --animation-fade-in: fadeIn 0.3s ease-in-out;
    --animation-fade-out: fadeOut 0.3s ease-in-out;
    --animation-slide-up: slideUp 0.3s ease-out;
    --animation-slide-down: slideDown 0.3s ease-out;
    --animation-slide-left: slideLeft 0.3s ease-out;
    --animation-slide-right: slideRight 0.3s ease-out;
    --animation-scale-in: scaleIn 0.2s ease-out;
    --animation-spin: spin 1s linear infinite;
    --animation-pulse: pulse 2s ease-in-out infinite;
    --animation-bounce: bounce 0.6s ease-out;
}

/* ============================================
   BREAKPOINTS
   ============================================ */
:root {
    /* Breakpoints */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1024px;
    --breakpoint-2xl: 1200px;
    --breakpoint-3xl: 1400px;
    --breakpoint-4xl: 1600px;

    /* Container Widths */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-2xl: 1320px;
    --container-full: 100%;
}

/* ============================================
   ACESSIBILIDADE
   ============================================ */
:root {
    /* Tamanhos de Cursor */
    --cursor-size-sm: default;
    --cursor-size-md: 24px;
    --cursor-size-lg: 32px;

    /* Cores de Foco */
    --focus-ring-color: var(--color-accent);
    --focus-ring-offset: 2px;
    --focus-ring-width: 2px;

    /* Guia de Leitura */
    --reading-guide-color-blue: rgba(30, 58, 138, 0.3);
    --reading-guide-color-orange: rgba(234, 88, 12, 0.3);
    --reading-guide-color-black: rgba(0, 0, 0, 0.3);
    --reading-guide-height: 40px;

    /* Destaque de Links */
    --link-highlight-color: #ffeb3b;
    --link-highlight-style: underline wavy;

    /* Destaque de Títulos */
    --header-highlight-color: rgba(255, 235, 59, 0.4);
    --header-highlight-style: background;
}

/* ============================================
   COMPONENTES ESPECÍFICOS
   ============================================ */
:root {
    /* Header */
    --header-height: 72px;
    --header-bg: var(--bg-primary);
    --header-border-color: var(--border-color);
    --top-bar-height: 40px;
    --top-bar-bg: var(--color-secondary);
    --top-bar-text: #ffffff;

    /* Mega Menu */
    --mega-panel-width: 100%;
    --mega-panel-max-width: 1400px;
    --mega-panel-height: 400px;
    --mega-panel-max-height: 70vh;
    --mega-panel-bg: var(--bg-mega-panel);
    --mega-panel-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.08);

    /* Mobile Menu */
    --mobile-menu-width: 320px;
    --mobile-menu-width-lg: 400px;
    --mobile-menu-bg: var(--bg-primary);
    --mobile-menu-overlay-bg: rgba(0, 0, 0, 0.5);

    /* Footer */
    --footer-bg: var(--color-secondary);
    --footer-text: #ffffff;
    --footer-link-color: rgba(255, 255, 255, 0.8);
    --footer-link-hover: #ffffff;

    /* Cookie Banner */
    --cookie-banner-bg: var(--bg-primary);
    --cookie-banner-shadow: var(--shadow-lg);
    --cookie-overlay-bg: rgba(0, 0, 0, 0.6);

    /* Accessibility Widget */
    --accessibility-widget-size: 56px;
    --accessibility-widget-bg: var(--color-primary);
    --accessibility-widget-hover: var(--color-primary-dark);
    --accessibility-panel-width: 360px;
    --accessibility-panel-max-height: 80vh;
    --accessibility-panel-bg: var(--bg-primary);
    --accessibility-panel-shadow: var(--shadow-xl);

    /* Back to Top */
    --back-to-top-size: 48px;
    --back-to-top-bg: var(--color-primary);
    --back-to-top-hover: var(--color-primary-dark);
    --back-to-top-text: #ffffff;

    /* Botões */
    --btn-height-sm: 32px;
    --btn-height-md: 40px;
    --btn-height-lg: 48px;
    --btn-padding-x-sm: 12px;
    --btn-padding-x-md: 16px;
    --btn-padding-x-lg: 24px;

    /* Formulários */
    --input-height-sm: 32px;
    --input-height-md: 40px;
    --input-height-lg: 48px;
    --input-bg: var(--bg-primary);
    --input-border: var(--border-color);
    --input-border-radius: var(--radius-md);

    /* Cards */
    --card-bg: var(--bg-primary);
    --card-border: var(--border-color);
    --card-radius: var(--radius-lg);
    --card-shadow: var(--shadow-md);
    --card-shadow-hover: var(--shadow-lg);

    /* Scrollbar */
    --scrollbar-width: 8px;
    --scrollbar-height: 8px;
    --scrollbar-thumb: var(--color-primary);
    --scrollbar-track: var(--bg-tertiary);
    --scrollbar-radius: 4px;
}

/* ============================================
   TEMAS (Light/Dark)
   ============================================ */
[data-theme="dark"] {
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3d3d3d;
    --bg-mega-panel: #1a1a1a;
    --border-color: rgba(255, 255, 255, 0.12);
    --border-color-light: rgba(255, 255, 255, 0.08);
    --border-color-dark: rgba(255, 255, 255, 0.2);
}

/* ============================================
   REDUÇÃO DE MOVIMENTO
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-duration-fast: 0ms;
        --transition-duration-normal: 0ms;
        --transition-duration-slow: 0ms;
        --transition-duration-slower: 0ms;
        --animation-fade-in: none;
        --animation-fade-out: none;
        --animation-slide-up: none;
        --animation-slide-down: none;
        --animation-scale-in: none;
    }
}

/* ============================================
   IMPRESSÃO
   ============================================ */
@media print {
    :root {
        --header-height: 0;
        --footer-bg: transparent;
        --color-primary: #000000;
        --bg-primary: transparent;
    }
}