:root {
    /* Colores base con nombres descriptivos */
    --terracota: #E07A5F;
    --naranja: #F4A261;
    --crema: #FDF9F2;
    --beige: #F4E1D2;
    --beige-arena: #F4E1D2;
    --blanco-hueso: #F9F9F9;
    --gris-piedra: #A8A8A8;
    --azul-profundo: #2F4858;
    --negro-grafito: #333333;
    
    /* Variables de texto */
    --texto-medio: #666666;
    
    /* Colores con nombres semánticos */
    --color-primario: var(--terracota);       /* 🎾 Primario - Terracota Claro - Cálido y distintivo */
    --color-base: var(--blanco-hueso);        /* 🎾 Primario - Blanco Hueso - Base limpia y minimalista */
    --color-secundario: var(--gris-piedra);   /* 🎾 Secundario - Gris Piedra - Sofisticado y equilibrado */
    --color-acento: var(--azul-profundo);     /* 🎾 Secundario - Azul Profundo - Elegante, buen contraste */
    --color-complementario: var(--azul-profundo); /* 🎾 Terciario - Azul Profundo - Complementa sin sobrecargar */
    --color-texto: var(--negro-grafito);      /* 🎾 Terciario - Negro Grafito - Para texto y detalles oscuros */
    
    /* Variables funcionales para uso específico */
    --fondo-pagina: var(--color-base);
    --fondo-componente: white;
    --borde-componente: var(--color-secundario);
    --texto-principal: var(--color-texto);
    --texto-secundario: var(--color-secundario);
    --boton-primario: var(--color-primario);
    --boton-secundario: var(--color-acento);
    --hover-primario: var(--color-complementario);
    --hover-secundario: var(--azul-profundo);
    --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.1);
    --sombra-media: 0 4px 12px rgba(0, 0, 0, 0.15);
    --radio-pequeno: 8px;
    --radio-medio: 12px;
    --radio-grande: 20px;
}