/* 
===========================================
SMARTQUEUE DESIGN TOKENS
===========================================
Reusable design tokens for consistent UI across the application
*/

:root {
  /* ===========================================
     SPACING TOKENS
     ========================================== */
  --spacing-outer-padding: 24px;
  --spacing-vertical-gap-sm: 12px;
  --spacing-vertical-gap-lg: 16px;
  --spacing-card-padding: 20px;
  --spacing-field-gap: 16px;
  --spacing-input-padding: 16px 20px;
  --spacing-button-padding: 18px 24px;

  /* ===========================================
     RADIUS TOKENS
     ========================================== */
  --radius-card: 20px;
  --radius-input: 16px;
  --radius-button: 12px;
  --radius-small: 8px;
  --radius-large: 24px;

  /* ===========================================
     TYPOGRAPHY TOKENS
     ========================================== */
  /* Titles */
  --font-size-title: 60px;
  --font-weight-title: 700;
  --line-height-title: 1.2;

  /* Ticket Numbers (Monospace) - Mejorado para contraste */
  --font-size-ticket: 90px;
  --font-weight-ticket: 800;  /* Peso mayor para mejor legibilidad */
  --line-height-ticket: 1;
  --font-family-ticket: 'Courier New', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  --letter-spacing-ticket: -0.02em;  /* Tracking más cerrado para números */

  /* Body Text */
  --font-size-body: 21px;
  --font-weight-body: 400;
  --line-height-body: 1.6;

  /* Button Text */
  --font-size-button: 19px;
  --font-weight-button: 500;
  --line-height-button: 1.2;

  /* Small Text */
  --font-size-small: 19px;
  --font-weight-small: 400;
  --line-height-small: 1.4;

  /* Current Served Label (Actuellement servi) */
  --font-size-current-served: 32px;
  
  /* Cancelled Positions Label (Positions annulées) */
  --font-size-cancelled-label: 28px;

  /* Label Text */
  --font-size-label: 19px;
  --font-weight-label: 500;
  --line-height-label: 1.4;

  /* ===========================================
     CORE PALETTE (WCAG 4.5:1+ Compliant)
     ========================================== */
  
  /* Brand / Action Colors - Azul solo como acento */
  --brand-600: #2563EB;  /* CTA y acentos principales */
  --brand-700: #1D4ED8;  /* Hover/active states */
  --brand-500: #3B82F6;  /* Subtle accents */
  --brand-400: #60A5FA;  /* Acento sobre oscuro */
  --brand-300: #93C5FD;  /* Enlaces sobre oscuro */

  /* Neutral Colors for Light Surfaces */
  --text-strong: #0F172A;      /* Headings on light backgrounds */
  --text: #334155;             /* Body text on light backgrounds */
  --text-muted: #64748B;       /* Helper text on light backgrounds */
  --text-placeholder: #94A3B8; /* Placeholder text */
  --divider: #E2E8F0;          /* Dividers and borders */

  /* Neutral Colors for Dark/Gradient Surfaces - Kit de Contraste */
  --inv-strong: #FFFFFF;   /* Títulos y números principales (≥4.5:1) */
  --inv: #E2E8F0;          /* Cuerpo de texto (≥4.5:1) */
  --inv-muted: #A7B3C7;    /* Ayudas/labels (≥3:1) */
  
  /* Legacy aliases (mantener compatibilidad) */
  --text-inverse-strong: var(--inv-strong);
  --text-inverse: var(--inv);
  --text-inverse-muted: var(--inv-muted);

  /* State Colors */
  --success: #10B981;   /* Success states only */
  --warn: #F59E0B;      /* Warning states only */
  --error: #EF4444;     /* Error states only (reserve red for errors) */

  /* ===========================================
     SUPERFICIES - Glass Cards & Backgrounds
     ========================================== */
  
  /* Glass card surfaces - Más opacidad para mejor contraste */
  --card-dark: rgba(17, 24, 39, 0.55);      /* Fondo de la tarjeta principal */
  --card-border: rgba(255, 255, 255, 0.18); /* Borde del glass más visible */
  --card-backdrop-blur: 12px;                /* Blur reducido para menos "lavado" */
  
  /* Vignette para oscurecer gradiente detrás de tarjetas */
  --vignette-overlay: radial-gradient(80% 60% at 50% 15%, rgba(0,0,0,0.25), transparent 60%);

  /* ===========================================
     EXTENDED PALETTE FOR COMPONENTS
     ========================================== */
  
  /* Blue scale for additional uses */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: var(--brand-500);
  --color-blue-600: var(--brand-600);
  --color-blue-700: var(--brand-700);
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;

  /* Status Colors (Extended) */
  --color-success: var(--success);
  --color-success-light: #dcfce7;
  --color-success-dark: #059669;

  --color-warning: var(--warn);
  --color-warning-light: #fef3c7;
  --color-warning-dark: #d97706;

  --color-error: var(--error);
  --color-error-light: #fef2f2;
  --color-error-dark: #dc2626;

  --color-info: var(--brand-600);
  --color-info-light: #dbeafe;
  --color-info-dark: var(--brand-700);

  /* Progress Colors */
  --color-progress-bg: rgba(255, 255, 255, 0.1);
  --color-progress-fill: var(--brand-500);

  /* Neutral Colors (Extended) */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Background Colors */
  --color-bg-primary: rgba(255, 255, 255, 0.05);
  --color-bg-secondary: rgba(255, 255, 255, 0.08);
  --color-bg-input: var(--color-white);
  --color-bg-overlay: rgba(0, 0, 0, 0.8);

  /* Border Colors */
  --color-border-light: rgba(255, 255, 255, 0.15);
  --color-border-medium: rgba(255, 255, 255, 0.2);
  --color-border-focus: var(--brand-500);

  /* Legacy Text Colors (Mapped to new system) */
  --color-text-primary: var(--text-inverse-strong);
  --color-text-secondary: var(--text-inverse);
  --color-text-muted: var(--text-inverse-muted);
  --color-text-input: var(--text-strong);
  --color-text-placeholder: var(--text-placeholder);

  /* ===========================================
     FOCUS RING TOKENS
     ========================================== */
  --focus-ring-width: 4px;
  --focus-ring-color: rgba(59, 130, 246, 0.3);
  --focus-ring-offset: 2px;

  /* Focus states for different contexts */
  --focus-ring-success: rgba(34, 197, 94, 0.3);
  --focus-ring-warning: rgba(245, 158, 11, 0.3);
  --focus-ring-error: rgba(239, 68, 68, 0.3);

  /* ===========================================
     SHADOW TOKENS
     ========================================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --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);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Text shadows para contraste en superficies oscuras */
  --text-shadow-ticket: 0 2px 8px rgba(0, 0, 0, 0.35);  /* Para número de ticket grande */
  --text-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.25);  /* Para texto importante */
  --text-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25);    /* Para texto general */

  /* ===========================================
     TRANSITION TOKENS
     ========================================== */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.2s ease-in-out;
  --transition-slow: 0.3s ease-in-out;

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

  /* ===========================================
     RESPONSIVE BREAKPOINTS
     ========================================== */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;

  /* ===========================================
     ANIMATION TOKENS
     ========================================== */
  --animation-fade-in: modernFadeIn 0.6s ease-out;
  --animation-scale-in: modernScaleIn 0.3s ease-out;
  --animation-slide-up: modernSlideUp 0.4s ease-out;
  --animation-token-pulse: tokenPulse 0.6s ease-in-out;
  --animation-token-highlight: tokenHighlight 1s ease-out;
}

/* ===========================================
   ICON TOKENS (Monochrome Line Icons)
   ========================================== */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-md {
  width: 20px;
  height: 20px;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

/* ===========================================
   UTILITY CLASSES
   ========================================== */

/* Spacing utilities */
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-vertical-gap-sm); }
.p-2 { padding: var(--spacing-vertical-gap-lg); }
.p-3 { padding: var(--spacing-outer-padding); }

.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-vertical-gap-sm); }
.m-2 { margin: var(--spacing-vertical-gap-lg); }
.m-3 { margin: var(--spacing-outer-padding); }

.gap-1 { gap: var(--spacing-vertical-gap-sm); }
.gap-2 { gap: var(--spacing-vertical-gap-lg); }
.gap-3 { gap: var(--spacing-outer-padding); }

/* Border radius utilities */
.rounded-sm { border-radius: var(--radius-small); }
.rounded-md { border-radius: var(--radius-button); }
.rounded-lg { border-radius: var(--radius-input); }
.rounded-xl { border-radius: var(--radius-card); }
.rounded-2xl { border-radius: var(--radius-large); }

/* Typography utilities */
.text-title { 
  font-size: var(--font-size-title); 
  font-weight: var(--font-weight-title);
  line-height: var(--line-height-title);
}

.text-ticket { 
  font-family: var(--font-family-ticket);
  font-size: var(--font-size-ticket); 
  font-weight: var(--font-weight-ticket);
  line-height: var(--line-height-ticket);
  letter-spacing: var(--letter-spacing-ticket);
}

.text-body { 
  font-size: var(--font-size-body); 
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
}

.text-small { 
  font-size: var(--font-size-small); 
  font-weight: var(--font-weight-small);
  line-height: var(--line-height-small);
}

.text-label { 
  font-size: var(--font-size-label); 
  font-weight: var(--font-weight-label);
  line-height: var(--line-height-label);
}

/* Color utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-blue { color: var(--color-blue-500); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

/* New semantic text color utilities */
.text-strong { color: var(--text-strong); }
.text-body { color: var(--text); }
.text-helper { color: var(--text-muted); }
.text-placeholder { color: var(--text-placeholder); }

/* Kit de Contraste - Texto sobre superficies oscuras/gradiente */
.text-inv-strong { color: var(--inv-strong); }
.text-inv { color: var(--inv); }
.text-inv-muted { color: var(--inv-muted); }

/* Alias para compatibilidad */
.text-inverse-strong { color: var(--text-inverse-strong); }
.text-inverse { color: var(--text-inverse); }
.text-inverse-muted { color: var(--text-inverse-muted); }

/* Brand colors - solo como acentos */
.text-brand-primary { color: var(--brand-600); }
.text-brand-accent { color: var(--brand-400); }      /* Para usar sobre oscuro */
.text-brand-link { color: var(--brand-300); }        /* Enlaces sobre oscuro */
.text-brand-hover { color: var(--brand-700); }

.text-state-success { color: var(--success); }
.text-state-warning { color: var(--warn); }
.text-state-error { color: var(--error); }

/* Background utilities */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-blue { background-color: var(--color-blue-600); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-error { background-color: var(--color-error); }

.bg-brand-primary { background-color: var(--brand-600); }
.bg-brand-accent { background-color: var(--brand-500); }
.bg-brand-hover { background-color: var(--brand-700); }

/* Special text effects for glass surfaces */
.text-shadow-soft { text-shadow: var(--text-shadow-soft); }
.text-shadow-subtle { text-shadow: var(--text-shadow-subtle); }
.text-shadow-ticket { text-shadow: var(--text-shadow-ticket); }  /* Para números de ticket */
.text-shadow-glow { text-shadow: 0 4px 10px rgba(37, 99, 235, 0.25); }

/* Glass card utilities */
.glass-card {
  background: var(--card-dark);
  backdrop-filter: blur(var(--card-backdrop-blur));
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: var(--spacing-card-padding);
}

.glass-card-strong {
  background: rgba(17, 24, 39, 0.7);  /* Más opaco para contenido principal */
  backdrop-filter: blur(var(--card-backdrop-blur));
  border: 1px solid var(--card-border);
}

/* Vignette overlay utility */
.vignette-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--vignette-overlay);
  pointer-events: none;
  z-index: 1;
}

.vignette-bg {
  position: relative;
}

.vignette-bg > * {
  position: relative;
  z-index: 2;
}

/* Disabled state utilities */
.text-disabled { 
  color: var(--text-muted); 
  opacity: 0.7; 
}
.text-inverse-disabled { 
  color: var(--text-inverse-muted); 
  opacity: 0.7; 
}

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

/* Focus utilities */
.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

.focus-ring-success:focus {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-success);
}

.focus-ring-warning:focus {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-warning);
}

.focus-ring-error:focus {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-error);
}

/* ===========================================
   COMPONENTE "VOTRE POSITION" - Kit de Contraste
   ========================================== */

/* Título principal de la pantalla */
.position-title {
  color: white !important;
  font-size: 2.67rem !important;
  font-weight: 300 !important;
  text-shadow: var(--text-shadow-subtle);
  margin-bottom: 1rem !important;
}

/* Número de ticket grande - BLANCO, no azul */
.position-ticket-number {
  color: var(--inv-strong);
  font-family: var(--font-family-ticket);
  font-size: var(--font-size-ticket);
  font-weight: var(--font-weight-ticket);
  letter-spacing: var(--letter-spacing-ticket);
  text-shadow: var(--text-shadow-ticket);
  line-height: 1;
}

/* Fila de información (Agence/Service/Date) */
.position-info-label {
  color: var(--inv-muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
}

.position-info-value {
  color: var(--inv-strong);
  font-weight: 600;
}

.position-info-value-accent {
  color: var(--brand-300);  /* Para valores que quieres destacar */
  font-weight: normal;
}

/* Estado actual "Actuellement servi" */
.position-current-label {
  color: var(--inv-muted);
  font-size: var(--font-size-current-served);
}

/* Cancelled positions label */
.position-cancelled-label {
  color: var(--inv-muted);
  font-size: var(--font-size-cancelled-label);
}

.position-current-number {
  color: var(--inv-strong);
  font-family: var(--font-family-ticket);
  font-weight: 700;
  text-shadow: var(--text-shadow-soft);
}

/* "Il reste X devant vous" */
.position-queue-text {
  color: var(--inv);
  font-size: 28px;
}

.position-queue-number {
  color: var(--brand-400);  /* El número destacado en azul claro */
  font-weight: 700;
}

/* Tarjeta de contenido principal */
.position-card {
  background: rgba(17, 24, 39, 0.7) !important; /* Always use darker hover background permanently */
  backdrop-filter: blur(var(--card-backdrop-blur));
  border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Always use hover border color permanently */
  border-radius: var(--radius-card);
  padding: 32px 24px;  /* Más aire arriba/abajo */
  margin: 24px 0;      /* Espaciado para que respire */
}

/* Inputs (mantienen fondo blanco) */
.position-input {
  background: var(--color-white);
  color: var(--text-strong);
  border: 1px solid var(--divider);
  border-radius: var(--radius-input);
  padding: var(--spacing-input-padding);
}

.position-input::placeholder {
  color: var(--text-placeholder);
}

/* Botón principal */
.position-button-primary {
  background: var(--brand-600);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-button);
  padding: var(--spacing-button-padding);
  font-weight: var(--font-weight-button);
  transition: var(--transition-normal);
}

.position-button-primary:hover {
  background: var(--brand-700);
}

.position-button-primary:focus {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* ===========================================
   ANIMATION KEYFRAMES
   ========================================== */
@keyframes modernFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modernScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes tokenPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes tokenHighlight {
  0% {
    background-color: rgba(34, 197, 94, 0.3);
    border-radius: var(--radius-button);
    padding: var(--spacing-vertical-gap-sm);
  }
  100% {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
  }
}

/* ===========================================
   RESPONSIVE DESIGN
   ========================================== */
@media (max-width: 768px) {
  :root {
    /* Adjust spacing for mobile */
    --spacing-outer-padding: 16px;
    --spacing-card-padding: 16px;
    --spacing-input-padding: 14px 18px;
    --spacing-button-padding: 16px 20px;
    
    /* Adjust typography for mobile */
    --font-size-title: 50px;
    --font-size-ticket: 70px;
    --font-size-button: 17px;
    --font-size-current-served: 26px;
    --font-size-cancelled-label: 22px;
  }
}

@media (max-width: 480px) {
  :root {
    /* Further adjust for very small screens */
    --spacing-outer-padding: 12px;
    --spacing-card-padding: 12px;
    --spacing-input-padding: 12px 16px;
    --spacing-button-padding: 14px 18px;
    
    /* Further adjust typography */
    --font-size-title: 42px;
    --font-size-ticket: 55px;
    --font-size-button: 15px;
    --font-size-current-served: 22px;
    --font-size-cancelled-label: 18px;
  }
}

/* ===========================================
   ACCESSIBILITY
   ========================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --color-border-light: rgba(255, 255, 255, 0.3);
    --color-border-medium: rgba(255, 255, 255, 0.5);
    --color-bg-primary: rgba(255, 255, 255, 0.1);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: none;
    --transition-normal: none;
    --transition-slow: none;
    --animation-fade-in: none;
    --animation-scale-in: none;
    --animation-slide-up: none;
    --animation-token-pulse: none;
    --animation-token-highlight: none;
  }
}

/* ===========================================
   PRINT STYLES
   ========================================== */
@media print {
  :root {
    --color-text-primary: #000000;
    --color-text-secondary: #333333;
    --color-bg-primary: #ffffff;
    --color-border-light: #cccccc;
  }
}