/*
    DEMO STYLE
*/

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
:root {
    --hr-green: #3d4d94;
    --hr-green-light: #5467B3;
    --hr-green-dark: #243066;
    --hr-green-fade: #C6D1FF; /*rgba(41, 90, 67, 0.2); CHANGE*/
    --light-bg: #f8fafc;
    --light-card: #ffffff;
    --light-border: #e2e8f0;
    --light-text: #1e293b;
    --light-header-1-text: #1e293b;
    --light-header-3-text: #b19567;
    --light-text-muted: #f1f5f9;
    --light-primary: #3d4d94;
    --light-primary-bg: #C6D1FF;
    --light-accent: #f1f5f9;
    --light-profile-card-bg: linear-gradient(135deg, var(--hr-green), var(--hr-green-dark));
    --light-link-hover-text: var(--hr-green-light);
    --light-link-text: #fff;
    --light-card-text: #fff;
    --dark-bg: #0f172a;
    --dark-card: #1e293b;
    --dark-border: #334155;
    --dark-text: #f1f5f9;
    --dark-header-1-text: #f1f5f9;
    --dark-header-3-text: #ccac77;
    --dark-text-muted: #1e293b;
    --dark-primary: #ADBDFF; /*Change*/
    --dark-primary-bg: #D4DAFF; /*rgba(74, 222, 128, 0.2);*/
    --dark-accent: #334155;
    --dark-profile-card-bg: linear-gradient(135deg, var(--hr-green-light), var(--hr-green-fade));
    --dark-link-hover-text: #fff;
    --dark-link-text: var(--hr-green);
    --dark-card-text: #252f5c;
}

.light {
    --bg: var(--light-bg);
    --card: var(--light-card);
    --border: var(--light-border);
    --text: var(--light-text);
    --header-1-text: var(--light-header-1-text);
    --header-3-text: var(--light-header-3-text);
    --text-muted: var(--light-text-muted);
    --primary: var(--light-primary);
    --primary-bg: var(--light-primary-bg);
    --accent: var(--light-accent);
    --profile-card-bg: var(--light-profile-card-bg);
    --link-hover-text: var(--light-link-hover-text);
    --link-text: var(--light-link-text);
    --card-text: var(--light-card-text);
}

.dark {
    --bg: var(--dark-bg);
    --card: var(--dark-card);
    --border: var(--dark-border);
    --text: var(--dark-text);
    --header-1-text: var(--dark-header-1-text);
    --header-3-text: var(--dark-header-3-text);
    --text-muted: var(--dark-text-muted);
    --primary: var(--dark-primary);
    --primary-bg: var(--dark-primary-bg);
    --accent: var(--dark-accent);
    --profile-card-bg: var(--dark-profile-card-bg);
    --link-hover-text: var(--dark-link-hover-text);
    --link-text: var(--dark-link-text);
    --card-text: var(--dark-card-text);
}

