/* Explain: CSS variables defining the color palette and typography for the theme. */
:root {
    --primary-color: #7554f6;
    --primary-hover: #5233d4;
    --secondary-color: #e8e6ff;
    --accent-color: #dfff54;
    --green-color: #17a077;
    --green-hover: #128a65;
    --button-color: #171720;
    --logo-subtitle-color: #5233d4;
    --background-color: #f7f7f8;
    --surface-color: #ffffff;
    --footer-bg: #171720;
    --text-color: #171720;
    --text-muted: #777681;
    --border-color: #e8e8ed;
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(117, 84, 246, 0.22);
    --nav-bg: rgba(255, 255, 255, 0.85);
    --field-bg: #f4f4f6;
    --sage-soft: rgba(117, 84, 246, 0.12);
    --sage-dark: #5233d4;
    --terracotta-soft: rgba(223, 255, 84, 0.35);
    --shadow-soft: 0 18px 50px rgba(37, 33, 59, 0.08);
    --shadow-button: 0 16px 36px rgba(117, 84, 246, 0.25);
    --font-heading: 'Cairo', 'Tajawal', sans-serif;
    --font-body: 'Cairo', 'Tajawal', sans-serif;
    --font-logo: 'Cairo', 'Tajawal', sans-serif;
    --rf-bg: #eaf5ec;
    --rf-border: #b6d3bb;
    --rf-text: #21523d;
    --rf-accent: #83b492;
}