/* css/variables.css */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Nueva Paleta de Colores Solicitada */
  --color-1: #C3C28B;
  --color-2: #658E66;
  --color-3: #255426;
  --color-4: #761F4A;
  --color-5: #000000;

  /* Mapeo a Variables del Sistema */
  --bg-primary: var(--color-5);
  --bg-secondary: #0d1a0e;
  --bg-tertiary: var(--color-3);
  
  --panel-bg: linear-gradient(135deg, rgba(37, 84, 38, 0.25) 0%, rgba(0, 0, 0, 0.85) 100%);
  --panel-border: rgba(195, 194, 139, 0.25);
  --panel-border-hover: rgba(195, 194, 139, 0.5);
  --glass-blur: blur(16px);
  
  /* Colores de Texto */
  --text-primary: #fdfbf7;
  --text-secondary: #c3c28b;
  --text-muted: #8a9a8b;
  
  /* Acentos y Gradientes */
  --color-primary: var(--color-2);
  --color-secondary: var(--color-4);
  --color-accent-blue: var(--color-1);
  --color-accent-green: var(--color-3);
  --color-accent-amber: var(--color-1);
  --color-emerald-light: var(--color-1);
  --color-emerald: var(--color-2);
  
  /* Gradientes de marca */
  --grad-primary: linear-gradient(135deg, var(--color-3) 0%, var(--color-2) 100%);
  --grad-export: linear-gradient(135deg, var(--color-2) 0%, var(--color-3) 100%);
  --grad-import: linear-gradient(135deg, var(--color-4) 0%, #4a132e 100%);
  --grad-dark: linear-gradient(180deg, var(--color-3) 0%, var(--color-5) 100%);
  --grad-glow: radial-gradient(circle at 50% 50%, rgba(195, 194, 139, 0.15) 0%, rgba(0, 0, 0, 0) 70%);

  /* Sombras y Brillos */
  --shadow-sm: 0 2px 8px -1px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 20px -2px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 10px 30px -5px rgba(0, 0, 0, 0.8);
  --glow-primary: 0 0 20px rgba(101, 142, 102, 0.35);
  --glow-export: 0 0 20px rgba(37, 84, 38, 0.45);
  --glow-import: 0 0 20px rgba(118, 31, 74, 0.45);

  /* Fuentes */
  --font-display: 'Outfit', sans-serif;
  --font-sans: 'Plus Jakarta Sans', sans-serif;

  /* Transiciones */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Bordes */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  
  /* Layout */
  --header-height: 72px;
  --nav-bottom-height: 64px;
  --max-width: 1400px;
}