/* Explain: Theme tokens defining colors, fonts, and spacing for the brand identity. */
:root {
    --primary-color: #0F2A43;
    --primary-hover: #1C3F5F;
    --secondary-color: #EAF1F8;
    --accent-color: #1E88E5;
    --accent-hover: #1565C0;
    --button-color: #1E88E5;
    --background-color: #FFFFFF;
    --surface-color: #F1F5F9;
    --surface-alt: #E7EEF6;
    --footer-bg: #0F2A43;
    --text-color: #16283A;
    --text-muted: #5A6B7B;
    --text-on-dark: #E8EEF4;
    --text-on-dark-muted: #A9BDD0;
    --border-color: rgba(15, 42, 67, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.82);
    --glass-border: rgba(15, 42, 67, 0.12);
    --nav-bg: rgba(255, 255, 255, 0.9);
    --field-bg: #FFFFFF;
    --shadow-soft: 0 18px 50px rgba(15, 42, 67, 0.08);
    --shadow-button: 0 14px 30px rgba(30, 136, 229, 0.28);
    --cta-brown: #8C6D4F;
    --cta-brown-hover: #725539;
    --font-heading: 'Tajawal', sans-serif;
    --font-body: 'Cairo', sans-serif;
    --font-logo: 'Tajawal', sans-serif;
}

html[data-theme="dark"] {
    --primary-color: #E8EEF4;
    --primary-hover: #FFFFFF;
    --secondary-color: #14304A;
    --accent-color: #4DA3F5;
    --accent-hover: #74B8FF;
    --button-color: #1E88E5;
    --background-color: #0B1826;
    --surface-color: #0F2233;
    --surface-alt: #16344F;
    --footer-bg: #071320;
    --text-color: #E8EEF4;
    --text-muted: #A9BDD0;
    --text-on-dark: #E8EEF4;
    --text-on-dark-muted: #A9BDD0;
    --border-color: rgba(232, 238, 244, 0.12);
    --glass-bg: rgba(15, 34, 51, 0.82);
    --glass-border: rgba(232, 238, 244, 0.14);
    --nav-bg: rgba(11, 24, 38, 0.9);
    --field-bg: #0F2233;
    --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.4);
    --shadow-button: 0 14px 30px rgba(30, 136, 229, 0.35);
    --cta-brown: #A88562;
    --cta-brown-hover: #8C6D4F;
}