/* =====================================================
   EGLE - Sistema de Gestao de Fotos Clinicas
   CSS Principal - Variaveis e Estilos Globais
   ===================================================== */

/* ----- CSS Reset ----- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--font-base);
  font-weight: var(--font-regular);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--background);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----- Variaveis CSS ----- */
:root {
  /* =====================================================
     Cores Primarias - Coral Egle
     Baseado em #f59178 (cor do logotipo)

     Estrategia:
     - 400: Cor do logo (#f59178) para destaque e marca
     - 500: Versao mais escura para botoes (melhor contraste)
     - 50-300: Tons claros para backgrounds e hover
     - 600-900: Tons escuros para estados e texto
     ===================================================== */
  --primary-50: #FFF5F2;
  --primary-100: #FFE8E1;
  --primary-200: #FFD4C9;
  --primary-300: #FFBAA8;
  --primary-400: #F59178;   /* Cor do logotipo */
  --primary-500: #E07050;   /* Botoes principais - contraste 4.5:1 */
  --primary-600: #C85A3A;   /* Hover */
  --primary-700: #A84428;   /* Active/Pressed */
  --primary-800: #7D3420;   /* Texto escuro */
  --primary-900: #4D2015;   /* Maximo contraste */

  /* Alias para facilitar uso */
  --primary-color: var(--primary-500);
  --primary-hover: var(--primary-600);
  --primary-light: var(--primary-50);
  --primary-dark: var(--primary-700);
  --primary-brand: var(--primary-400); /* Cor exata do logo */

  /* =====================================================
     Cores de Feedback
     Nota: Error usa tom magenta/carmim para distinguir do coral
     ===================================================== */
  --success-50: #E8F5E9;
  --success-100: #C8E6C9;
  --success-500: #22C55E;   /* Verde mais vibrante */
  --success-600: #16A34A;
  --success-700: #15803D;

  --error-50: #FDF2F8;      /* Tom rosado, distinto do coral */
  --error-100: #FCE7F3;
  --error-500: #DB2777;     /* Magenta/Pink - claramente diferente do coral */
  --error-600: #BE185D;
  --error-700: #9D174D;

  --warning-50: #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F59E0B;   /* Amarelo/Amber */
  --warning-600: #D97706;
  --warning-700: #B45309;

  --info-50: #ECFEFF;       /* Ciano/Teal - complementar ao coral */
  --info-100: #CFFAFE;
  --info-500: #06B6D4;
  --info-600: #0891B2;
  --info-700: #0E7490;

  /* Cores Neutras */
  --gray-50: #F8F9FA;
  --gray-100: #F1F3F5;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #CED4DA;
  --gray-500: #ADB5BD;
  --gray-600: #6C757D;
  --gray-700: #495057;
  --gray-800: #343A40;
  --gray-900: #212529;

  /* Alias de texto */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-disabled: var(--gray-400);
  --text-inverse: #FFFFFF;

  /* Alias de fundo */
  --background: var(--gray-50);
  --surface: #FFFFFF;
  --surface-hover: var(--gray-100);
  --border: var(--gray-300);
  --border-light: var(--gray-200);

  /* Tipografia - Tamanhos */
  --font-xs: 0.75rem;     /* 12px */
  --font-sm: 0.875rem;    /* 14px */
  --font-base: 1rem;      /* 16px */
  --font-lg: 1.125rem;    /* 18px */
  --font-xl: 1.25rem;     /* 20px */
  --font-2xl: 1.5rem;     /* 24px */
  --font-3xl: 1.875rem;   /* 30px */
  --font-4xl: 2.25rem;    /* 36px */

  /* Tipografia - Pesos */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Espacamentos */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Bordas */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-full: 9999px;

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

  /* Transicoes */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* Larguras de container */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
}

/* ----- Tema Escuro (Dark Mode) ----- */
[data-theme="dark"] {
  /* Cores Primarias - Coral Egle (ajustadas para dark) */
  --primary-50: #2D1A15;
  --primary-100: #3D2520;
  --primary-200: #5C362A;
  --primary-300: #8B4D38;
  --primary-400: #C06B50;
  --primary-500: #F59178;   /* Cor do logo como principal no dark */
  --primary-600: #FFAB94;
  --primary-700: #FFC4B3;
  --primary-800: #FFDDD2;
  --primary-900: #FFF5F2;

  /* Cores de Feedback (ajustadas para dark) */
  --success-50: #052E16;
  --success-100: #14532D;
  --success-500: #4ADE80;
  --success-600: #86EFAC;
  --success-700: #BBF7D0;

  --error-50: #500724;
  --error-100: #831843;
  --error-500: #F472B6;     /* Magenta/Pink para dark */
  --error-600: #F9A8D4;
  --error-700: #FBCFE8;

  --warning-50: #451A03;
  --warning-100: #78350F;
  --warning-500: #FBBF24;
  --warning-600: #FCD34D;
  --warning-700: #FDE68A;

  --info-50: #083344;
  --info-100: #164E63;
  --info-500: #22D3EE;      /* Ciano vibrante */
  --info-600: #67E8F9;
  --info-700: #A5F3FC;

  /* Cores Neutras (invertidas para dark) */
  --gray-50: #0D1117;
  --gray-100: #161B22;
  --gray-200: #21262D;
  --gray-300: #30363D;
  --gray-400: #484F58;
  --gray-500: #6E7681;
  --gray-600: #8B949E;
  --gray-700: #B1BAC4;
  --gray-800: #C9D1D9;
  --gray-900: #F0F6FC;

  /* Alias de texto (invertidos) */
  --text-primary: #F0F6FC;
  --text-secondary: #8B949E;
  --text-muted: #6E7681;
  --text-disabled: #484F58;
  --text-inverse: #0D1117;

  /* Alias de fundo (invertidos) */
  --background: #0D1117;
  --surface: #161B22;
  --surface-hover: #21262D;
  --border: #30363D;
  --border-light: #21262D;
  --border-color: #30363D;

  /* Sombras (ajustadas para dark) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

/* Transicao suave ao trocar tema */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ----- Elementos Base ----- */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}

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

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success-500); }
.text-error { color: var(--error-500); }
.text-warning { color: var(--warning-600); }

.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* ----- Layout Helpers ----- */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* ----- Animacoes ----- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.animate-fade-in {
  animation: fadeIn var(--transition-slow) ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp var(--transition-slow) ease-out;
}

.animate-fade-in-down {
  animation: fadeInDown var(--transition-slow) ease-out;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* Respeita preferencia de reducao de movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}