/* Explain: Theme color tokens and font variables for branding. */
:root {
    --primary-color: #7554f6;
    --primary-hover: #5233d4;
    --secondary-color: #e8e6ff;
    --accent-color: #dfff54;
    --accent-ink: #171720;
    --background-color: #f7f7f8;
    --surface-color: #ffffff;
    --footer-bg: #171720;
    --text-color: #171720;
    --text-muted: #777681;
    --border-color: #e8e8ed;
    --line-color: #e8e8ed;
    --field-bg: #f4f4f6;
    --nav-bg: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: #e8e8ed;
    --shadow-soft: 0 18px 50px rgba(37, 33, 59, 0.08);
    --shadow-button: 0 14px 30px rgba(117, 84, 246, 0.28);
    --font-heading: 'Cairo', sans-serif;
    --font-body: 'Cairo', sans-serif;
    --font-logo: 'Cairo', sans-serif;
}