/* Explain: Theme and color variables, including fonts. - */
:root {
    --primary-color: #0F766E; /* Teal 700 */
    --primary-hover: #0D9488; /* Teal 600 */
    --secondary-color: #1E3A8A; /* Blue 900 */
    --accent-color: #F59E0B; /* Amber 500 */
    --background-color: #F8FAFC; /* Slate 50 */
    --surface-color: #FFFFFF;
    --text-color: #0F172A; /* Slate 900 */
    --text-muted: #475569; /* Slate 600 */
    --border-color: #E2E8F0; /* Slate 200 */
    --font-heading: 'Cairo', sans-serif;
    --font-body: 'Tajawal', sans-serif;
    --radius-xl: 1rem;
    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}