/**
 * tokens.css — Variables de diseño globales
 * Extraídas del ZIP: CARRITO_DE_COMPRAS (React/Tailwind)
 * Se cargan en TODAS las páginas.
 */
:root {
    --rodio-teal:        #00B3A6;
    --rodio-teal-dk:     #00968b;
    --rodio-teal-lt:     #e6f7f6;
    --rodio-blue:        #2563EB;
    --rodio-blue-dk:     #1d4ed8;
    --rodio-blue-shadow: rgba(37,99,235,0.20);

    --rodio-gray-50:  #f9fafb;
    --rodio-gray-100: #f3f4f6;
    --rodio-gray-200: #e5e7eb;
    --rodio-gray-400: #9ca3af;
    --rodio-gray-500: #6b7280;
    --rodio-gray-600: #4b5563;
    --rodio-gray-700: #374151;
    --rodio-gray-900: #111827;

    --rodio-green-100: #dcfce7;
    --rodio-green-600: #16a34a;
    --rodio-red-50:    #fef2f2;
    --rodio-red-500:   #ef4444;
    --rodio-blue-100:  #dbeafe;
    --rodio-blue-600:  #2563eb;

    --rodio-radius:    8px;
    --rodio-radius-lg: 12px;
    --rodio-shadow-md: 0 4px 12px rgba(0,0,0,.12);
    --rodio-transition: 0.2s ease;
}