:root {

    --font-primary: "Plus Jakarta Sans", sans-serif;
    --color-bg: #f5f5f5;
    --color-surface: #ffffff;
    --color-surface-hover: #f3f4f6;
    --color-surface-hover-light: #ced0d3;
    --color-text: #000000;    
    --color-text-muted: #666;
    --color-border: #e8e8e8;
    --color-primary: #1c70c8;
    --color-primary-light: rgba(28, 112, 200, 0.35);
    --color-primary-dark: #002855;
    --color-light: #f4f9ff;    
    --color-secondary: #f5bd29;
    --color-secondary-dark: #DDAD43;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-fill: var(--color-primary-dark);
    --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-light: rgba(255, 255, 255, 0.2);
    --space-sm: 6px;
    --space-md: 12px;
    --space-lg: 20px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

:root.dark {
    --color-bg: #0f0f0f;
    --color-surface: #0f0f0f;
    --color-surface-hover: #1e293b;
    --color-surface-hover-light: #384150;
    --color-text: #ffffff;
    --color-text-muted: #ddd;
    --color-border: #333;
    --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);
}
