/* 
 * Calculadora de Fechas - Interface Design System
 * Direction: "Tiempo como herramienta de precisión"
 * Color World: Azul profundo + Dorado + Verde esmeralda
 */

/* ============================================
   TOKENS - Sistema de diseño
   ============================================ */

/* Colores del dominio (Color World) */
:root {
    /* Fondo - Azul profundo (noche/tiempo) */
    --surface-base: #0f172a;
    --surface-elevated: #1e293b;
    --surface-card: #334155;
    
    /* Énfasis - Dorado (sol/día) */
    --accent-primary: #f59e0b;
    --accent-primary-hover: #d97706;
    --accent-glow: rgba(245, 158, 11, 0.15);
    
    /* Énfasis secundario - Verde esmeralda (resultados) */
    --accent-success: #10b981;
    --accent-success-muted: rgba(16, 185, 129, 0.2);
    
    /* Énfasis error */
    --accent-error: #ef4444;
    --accent-error-muted: rgba(239, 68, 68, 0.2);
    
    /* Texto */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    /* Bordes - Progresión de énfasis */
    --border-subtle: rgba(148, 163, 184, 0.1);
    --border-default: rgba(148, 163, 184, 0.2);
    --border-emphasis: rgba(148, 163, 184, 0.3);
    
    /* Espaciado base */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    
    /* Radio */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
}

/* ============================================
   BASE
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--surface-base);
    color: var(--text-primary);
    /* Subtle gradient para profundidad */
    background-image: 
        radial-gradient(ellipse at top, rgba(245, 158, 11, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(16, 185, 129, 0.02) 0%, transparent 50%);
}

/* ============================================
   TARJETAS - Surface Elevation
   ============================================ */
.card {
    background-color: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    /* Borde izquierdo de color según tipo - Signature */
    border-left: 3px solid var(--accent-primary);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.card:hover {
    border-left-color: var(--accent-primary-hover);
    transform: translateY(-1px);
}

/* Diferentes colores de borde para secciones */
.card[data-section="arithmetic"] { border-left-color: var(--accent-primary); }
.card[data-section="weekday"] { border-left-color: #8b5cf6; /* Púrpura - misterio tiempo */ }
.card[data-section="difference"] { border-left-color: var(--accent-success); }

/* ============================================
   BOTONES - Énfasis dorado
   ============================================ */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
    color: #0f172a; /* Texto oscuro sobre dorado */
    font-weight: 600;
    border: none;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-primary-hover), #b45309);
    box-shadow: 0 0 20px var(--accent-glow);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

/* ============================================
   INPUTS - Más oscuros que el entorno
   ============================================ */
input[type="date"],
input[type="number"],
select {
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace; /* Monospace para fechas */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="date"]:hover,
input[type="number"]:hover,
select:hover {
    border-color: var(--border-emphasis);
}

input[type="date"]:focus,
input[type="number"]:focus,
select:focus {
    border-color: var(--accent-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Select arrow personalizada */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 1rem;
    padding-right: var(--space-8);
}

/* Calendar icon */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
    transition: filter 0.2s;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    filter: invert(1);
}

/* ============================================
   RESULTADOS - Estados con color semántico
   ============================================ */
#arithmeticResult,
#weekdayResult,
#differenceResult {
    font-family: 'JetBrains Mono', monospace;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

/* Success state */
#arithmeticResult.bg-green-700,
#weekdayResult.bg-gray-600,
#differenceResult.bg-gray-600 {
    background-color: var(--accent-success-muted) !important;
    border-left-color: var(--accent-success);
}

/* Error state */
#arithmeticResult.bg-red-700,
#weekdayResult.bg-red-700,
#differenceResult.bg-red-700 {
    background-color: var(--accent-error-muted) !important;
    border-left-color: var(--accent-error);
}

/* ============================================
   ANIMACIONES - Suaves, sin bounce
   ============================================ */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in-up 0.25s ease-out;
}

/* ============================================
   UTILIDADES
   ============================================ */

/* Focus visible */
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Responsive */
@media (max-width: 640px) {
    .card {
        padding: var(--space-4);
    }
    
    input[type="date"],
    input[type="number"],
    select {
        padding: var(--space-3);
    }
}

/* ============================================
   SIGNATURE - Línea temporal (para futura implementación)
   ============================================ */
/* 
   La línea temporal visual es el elemento único de esta app.
   Se implementará cuando se agregue visualización de fechas.
   
   .timeline {
       display: flex;
       align-items: center;
       gap: var(--space-2);
   }
   
   .timeline-dot {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background: var(--accent-primary);
   }
   
   .timeline-line {
       flex: 1;
       height: 2px;
       background: linear-gradient(90deg, var(--accent-primary), var(--accent-success));
   }
*/