:root {
    /* --font-primary: "Outfit", sans-serif; */
    /* --font-primary: "Inter", sans-serif; */

    --font-primary: "Plus Jakarta Sans", sans-serif;



    /* LIGHT THEME COLORS */
    --color-bg: #f5f5f5;
    --color-surface: #ffffff;
    --color-text: #000000;    
    --color-text-muted: #666;
    --color-border: #e8e8e8;

    /* BRAND COLORS */
    --color-primary: #1c70c8;
    --color-primary-light: rgba(28, 112, 200, 0.35);
    --color-primary-dark: #002855;

    --color-light: #f4f9ff;    


    --color-secondary: #F9B000;
    --color-secondary-dark: #d89a00;

    --color-white: #ffffff;
    --color-black: #000000;

    --color-fill: var(--color-primary-dark);

    /* BUTTON COLORS */
    --btn-submit-bg: var(--color-primary);
    --btn-submit-text: #ffffff;
    --btn-login-bg: #ffffff;
    --btn-login-text: #000000;

    --color-impact-bg: #aaa;
    --color-dark : #222;

    





    /* BORDER */
    --border-light: rgba(255, 255, 255, 0.2);

    /* SPACING */
    --space-sm: 6px;
    --space-md: 12px;
    --space-lg: 20px;

    /* COMMON RADIUS */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* DARK MODE OVERRIDES */
:root.dark {
    --color-bg: #0f0f0f;
    --color-surface: #0f172a;
    --color-text: #ffffff;
    --color-text-muted: #ddd;
    --color-border: #333;

    /* Darkened brand accents */
    --color-primary-light: rgba(28, 112, 200, 0.15);

    --color-light: #0f1f31;

    --btn-submit-bg: var(--color-primary);
    --btn-submit-text: #000000;
    --btn-login-bg: #333;
    --btn-login-text: #fff;
    --color-fill: var(--color-white);
    --color-impact-bg: #555;
}

body {
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: var(--color-text-dark);
}
a {
    text-decoration: none;
    color: inherit;
}

.color-text{
    color: var(--color-text);
}

.color-text-muted{
    color: var(--color-text-muted);
}

.color-black{
    color: var(--color-black);
}