/* Design Tokens - Peak Studio */
/* Sistema de diseño centralizado para consistencia visual */

:root {
  /* ===== COLORES PRINCIPALES ===== */
  
  /* Colores de Marca */
  --color-brand-primary: #DC143C;        /* Scarlet - Color principal */
  --color-brand-secondary: #FF2400;       /* Scarlet bright - Color secundario */
  --color-brand-accent: #0891b2;         /* Cyan - Color de acento */
  
  /* Colores de Fondo */
  --color-bg-primary: #0D0D0D;           /* Fondo principal - Negro profundo */
  --color-bg-secondary: #1C1C1C;         /* Fondo secundario - Gris oscuro */
  --color-bg-surface: #141414;           /* Fondo de superficie - Gris medio */
  --color-bg-elevated: #161616;          /* Fondo elevado - Gris claro */
  
  /* Colores de Texto */
  --color-text-primary: #FFFFFF;        /* Texto principal - Blanco */
  --color-text-secondary: #B3B3B3;       /* Texto secundario - Gris claro */
  --color-text-muted: #B8B8B8;          /* Texto atenuado - Gris medio */
  --color-text-inverse: #1A1A1A;        /* Texto inverso - Negro */
  
  /* Colores de Estado */
  --color-success: #059669;              /* Verde - Éxito */
  --color-warning: #ffc107;              /* Amarillo - Advertencia */
  --color-danger: #dc3545;                /* Rojo - Peligro */
  --color-info: #0891b2;                 /* Azul - Información */
  
  /* Colores de Borde */
  --color-border-primary: #2A2A2A;       /* Borde principal */
  --color-border-secondary: #3A3A3A;    /* Borde secundario */
  --color-border-focus: var(--color-brand-primary); /* Borde de enfoque */
  
  /* ===== TIPOGRAFÍA ===== */
  
  /* Familias de Fuente */
  --font-family-primary: 'Roboto', system-ui, -apple-system, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-family-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-family-mono: 'Fira Code', 'Monaco', 'Consolas', monospace;
  
  /* Tamaños de Fuente */
  --font-size-xs: 0.75rem;               /* 12px */
  --font-size-sm: 0.875rem;              /* 14px */
  --font-size-base: 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 */
  
  /* Pesos de Fuente */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Altura de Línea */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ===== ESPACIADO ===== */
  
  /* Escala de Espaciado (8px base) */
  --space-0: 0;
  --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 */
  --space-20: 5rem;                      /* 80px */
  --space-24: 6rem;                      /* 96px */
  
  /* ===== BORDES Y RADIOS ===== */
  
  /* Radios de Borde */
  --radius-none: 0;
  --radius-sm: 0.25rem;                  /* 4px */
  --radius-base: 0.5rem;                 /* 8px */
  --radius-lg: 0.75rem;                 /* 12px */
  --radius-xl: 1rem;                     /* 16px */
  --radius-2xl: 1.5rem;                 /* 24px */
  --radius-full: 9999px;                 /* Círculo */
  
  /* Grosor de Borde */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  
  /* ===== SOMBRAS ===== */
  
  /* Sombras de Elevación */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  
  /* Sombras Personalizadas */
  --shadow-gold: 0 0 0.75rem rgba(220, 20, 60, 0.45);
  --shadow-gold-lg: 0 0 1.5rem rgba(220, 20, 60, 0.6);
  --shadow-focus: 0 0 0 0.2rem rgba(220, 20, 60, 0.25);
  
  /* ===== TRANSICIONES ===== */
  
  /* Duración */
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.3s;
  --duration-slower: 0.5s;
  
  /* Funciones de Timing */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Transiciones Comunes */
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-normal: all var(--duration-normal) var(--ease-out);
  --transition-slow: all var(--duration-slow) var(--ease-out);
  
  /* ===== Z-INDEX ===== */
  
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  
  /* ===== BREAKPOINTS ===== */
  
  /* Breakpoints para media queries */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  
  /* ===== COMPONENTES ESPECÍFICOS ===== */
  
  /* Botones */
  --btn-padding-sm: var(--space-2) var(--space-3);
  --btn-padding-base: var(--space-3) var(--space-4);
  --btn-padding-lg: var(--space-4) var(--space-6);
  
  /* Cards */
  --card-padding: var(--space-6);
  --card-padding-sm: var(--space-4);
  --card-padding-lg: var(--space-8);
  
  /* Formularios */
  --input-padding: var(--space-3) var(--space-4);
  --input-height: 2.5rem;
  --input-height-sm: 2rem;
  --input-height-lg: 3rem;
  
  /* Tablas */
  --table-cell-padding: var(--space-3) var(--space-4);
  --table-cell-padding-sm: var(--space-2) var(--space-3);
  
  /* ===== GRADIENTES ===== */
  
  /* Gradientes de Marca */
  --gradient-brand: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
  --gradient-brand-reverse: linear-gradient(135deg, var(--color-brand-secondary), var(--color-brand-primary));
  
  /* Gradientes de Fondo */
  --gradient-bg-surface: linear-gradient(135deg, var(--color-bg-surface), var(--color-bg-elevated));
  --gradient-bg-card: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-surface));
  
  /* ===== UTILIDADES ===== */
  
  /* Opacidad */
  --opacity-0: 0;
  --opacity-25: 0.25;
  --opacity-50: 0.5;
  --opacity-75: 0.75;
  --opacity-100: 1;
  
  /* Escalado */
  --scale-0: 0;
  --scale-50: 0.5;
  --scale-75: 0.75;
  --scale-90: 0.9;
  --scale-95: 0.95;
  --scale-100: 1;
  --scale-105: 1.05;
  --scale-110: 1.1;
  --scale-125: 1.25;
  --scale-150: 1.5;
}

/* ===== CLASES UTILITARIAS ===== */

/* Colores de Texto */
.text-brand { color: var(--color-brand-primary) !important; }
.text-brand-secondary { color: var(--color-brand-secondary) !important; }
.text-muted-custom { color: var(--color-text-muted) !important; }

/* Colores de Fondo */
.bg-brand { background-color: var(--color-brand-primary) !important; }
.bg-brand-gradient { background: var(--gradient-brand) !important; }
.bg-surface { background-color: var(--color-bg-surface) !important; }

/* Bordes */
.border-brand { border-color: var(--color-brand-primary) !important; }
.border-focus { border-color: var(--color-border-focus) !important; }

/* Sombras */
.shadow-brand { box-shadow: var(--shadow-gold) !important; }
.shadow-brand-lg { box-shadow: var(--shadow-gold-lg) !important; }
.shadow-focus { box-shadow: var(--shadow-focus) !important; }

/* Transiciones */
.transition-fast { transition: var(--transition-fast) !important; }
.transition-normal { transition: var(--transition-normal) !important; }
.transition-slow { transition: var(--transition-slow) !important; }

/* Espaciado */
.p-brand { padding: var(--space-4) !important; }
.m-brand { margin: var(--space-4) !important; }

/* Radios */
.rounded-brand { border-radius: var(--radius-base) !important; }
.rounded-brand-lg { border-radius: var(--radius-lg) !important; }

/* ===== MEDIA QUERIES ===== */

@media (max-width: 768px) {
  :root {
    --font-size-base: 0.875rem;
    --space-4: 0.75rem;
    --card-padding: var(--space-4);
  }
}

@media (max-width: 576px) {
  :root {
    --font-size-base: 0.8rem;
    --space-4: 0.5rem;
    --card-padding: var(--space-3);
  }
}