/**
 * Paleta de Cores - NupesMI
 * Definição das cores do projeto usando CSS Custom Properties
 */

:root {
  /* ========================================
     CORES PRIMÁRIAS
     ======================================== */
  --color-primary: #369FAE;
  --color-primary-rgb: 54, 159, 174;
  --color-primary-dark: #0C8B9D;
  --color-primary-light: #1BABB6;
  
  --color-secondary: #ea8181;
  --color-secondary-rgb: 234, 129, 129;
  
  --color-tertiary: #41a0b2;
  --color-tertiary-rgb: 65, 160, 178;
  --color-teal: #07899B;
  
  /* ========================================
     CORES DE DESTAQUE
     ======================================== */
  --color-accent-pink: #ff9999;
  --color-accent-pink-rgb: 255, 153, 153;
  --color-pink: #FF9999;
  
  /* ========================================
     ESCALA DE CINZAS
     ======================================== */
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;
  
  --color-gray-900: #161716;
  --color-gray-800: #505050;
  --color-gray-700: #535354;
  --color-gray-600: #555555;
  --color-gray-500: #8C93A1;
  --color-gray-400: #8D8A8A;
  --color-gray-300: #969696;
  --color-gray-200: #CACACA;
  --color-gray-100: #dddddd;
  
  /* Legacy aliases */
  --color-gray-dark: #555555;
  --color-gray-dark-rgb: 85, 85, 85;
  --color-gray-medium: #999999;
  --color-gray-medium-rgb: 153, 153, 153;
  --color-gray-light: #dddddd;
  --color-gray-light-rgb: 221, 221, 221;
  
  /* ========================================
     CORES SEMÂNTICAS PARA TEXTO
     ======================================== */
  --color-text-primary: #161716;
  --color-text-secondary: #535354;
  --color-text-tertiary: #8C93A1;
  --color-text-muted: #969696;
  
  /* ========================================
     CORES CLARAS/PASTÉIS
     ======================================== */
  --color-light-blue: #b6eaff;
  --color-light-blue-rgb: 182, 234, 255;
  
  --color-light-mint: #aee1cd;
  --color-light-mint-rgb: 174, 255, 205;
  
  /* ========================================
     SISTEMA DE SOMBRAS
     ======================================== */
  --shadow-light: 0 2px 5px rgba(0, 0, 0, 0.1);
  --shadow-sm: -14.5px 28.5px 12.3px 0px rgba(141, 138, 138, 0.13);
  --shadow-md: -14.5px 28.5px 12.3px 0px rgba(141, 138, 138, 0.22);
  --shadow-lg: -14.5px 28.5px 12.3px 0px rgba(141, 138, 138, 0.31);
  
  /* ========================================
     SISTEMA DE ESPAÇAMENTO
     ======================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-15: 60px;
  --space-18: 72px;
  --space-20: 80px;
  --space-25: 100px;
  --space-28: 110px;
  --space-33: 130px;
  
  /* ========================================
     TIPOGRAFIA - TAMANHOS
     ======================================== */
  --text-xs: 14px;
  --text-sm: 15px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 26px;
  --text-4xl: 32px;
  --text-5xl: 40px;
  --text-6xl: 48px;
  
  /* ========================================
     TIPOGRAFIA - PESOS
     ======================================== */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* ========================================
     TIPOGRAFIA - LINE HEIGHTS
     ======================================== */
  --leading-tight: 1.3;
  --leading-snug: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.7;
  
  /* ========================================
     BORDER RADIUS
     ======================================== */
  --radius-sm: 20px;
  --radius-md: 30px;
  --radius-lg: 39px;
  --radius-full: 50%;
  
  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* ========================================
     BREAKPOINTS (para uso em JS)
     ======================================== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* ========================================
     CONTAINERS
     ======================================== */
  --container-max: 1920px;
  --container-wide: 1700px;
  --container-default: 1500px;
  --container-narrow: 1200px;
}

/* Classes utilitárias para aplicação direta */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-tertiary { background-color: var(--color-tertiary); }
.bg-accent-pink { background-color: var(--color-accent-pink); }
.bg-white { background-color: var(--color-white); }
.bg-gray-dark { background-color: var(--color-gray-dark); }
.bg-gray-medium { background-color: var(--color-gray-medium); }
.bg-gray-light { background-color: var(--color-gray-light); }
.bg-light-blue { background-color: var(--color-light-blue); }
.bg-light-mint { background-color: var(--color-light-mint); }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-tertiary { color: var(--color-tertiary); }
.text-accent-pink { color: var(--color-accent-pink); }
.text-white { color: var(--color-white); }
.text-gray-dark { color: var(--color-gray-dark); }
.text-gray-medium { color: var(--color-gray-medium); }
.text-gray-light { color: var(--color-gray-light); }
.text-light-blue { color: var(--color-light-blue); }
.text-light-mint { color: var(--color-light-mint); }

.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-tertiary { border-color: var(--color-tertiary); }
.border-accent-pink { border-color: var(--color-accent-pink); }
.border-white { border-color: var(--color-white); }
.border-gray-dark { border-color: var(--color-gray-dark); }
.border-gray-medium { border-color: var(--color-gray-medium); }
.border-gray-light { border-color: var(--color-gray-light); }
.border-light-blue { border-color: var(--color-light-blue); }
.border-light-mint { border-color: var(--color-light-mint); }