/* ================= THEME VARIABLES ================= */
:root {

    /* MAIN BRAND COLORS */
    --primary: #1e90ff;        /* main blue */
    --primary-dark: #0c2d63;   /* dark blue (your image color) */
    --white: #ffffff;

    /* LIGHT SHADES (same color family only) */
    --primary-light: #4da9ff;
    --primary-ultra-light: #eaf4ff;

    /* BACKGROUNDS */
    --bg-main: var(--white);
    --bg-light: var(--primary-ultra-light);
    --bg-dark: var(--primary-dark);

    /* TEXT */
    --text-dark: var(--primary-dark);
    --text-light: var(--white);
    --text-soft: #6b85a6; /* muted blue tone (not grey random) */

    /* GRADIENTS (only same color family) */
    --gradient-main: linear-gradient(135deg, #1e90ff, #4da9ff);
    --gradient-dark: linear-gradient(135deg, #0c2d63, #123b7a);

    /* SHADOWS (soft blue tone instead of black) */
    --shadow-light: 0 10px 30px rgba(30,144,255,0.10);
    --shadow-medium: 0 20px 60px rgba(12,45,99,0.20);

    /* BORDER RADIUS */
    --radius: 20px;
}