/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/*=============== VARIABLES CSS ===============*/

:root {
    --header-height: 3.5rem;
    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Inter", system-ui;
    --normal-font-size: .938rem;
    --smaller-font-size: .75rem;
    --tiny-font-size: .75rem;

    /*========== Font weight ==========*/
    --font-regular: 400;
    --font-semi-bold: 600;

    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;

    /* Colors */
    --eco-green: #2e7d32;
    --eco-green-dark: #1b5e20;
    --eco-green-light: #388e3c;
}

[data-bs-theme=dark] {
    --cms-primary: hsl(228, 100%, 20%);
    --cms-secondary: hsl(351, 88%, 51%);
    --cms-tertiary: hsl(237, 29%, 74%);

    --bg-color: hsl(0, 0%, 9%);
    --bg-secondary: hsl(0, 0%, 13%);  /* Added - slightly lighter than bg-color */
    --sidebar-bg-color: hsl(0, 0%, 13%);
    --text-color: hsl(210, 20%, 95%);
    --heading-color: hsl(210, 20%, 98%);
    --shadow-color: hsla(0, 0%, 0%, 0.5);
    --border: hsl(0, 0%, 20%);  /* Added - subtle border color */
    --bg-hover: hsl(0, 0%, 15%);  /* Added - hover state background */

    /* NAV BAR COLORS*/
    --navbar-bg-color: hsl(0, 0%, 16%);
    --navbar-text-color: hsl(210, 20%, 95%);
    --navbar-hover-bg-color: hsl(0, 0%, 20%);
    --navbar-shadow-color: hsla(0, 0%, 0%, 0.5);

    /* BUTTON COLORS */
    --btn-primary-bg-color: hsl(210, 100%, 56%);
    --btn-primary-text-color: hsl(0, 0%, 100%);
    --btn-primary-hover-bg-color: hsl(210, 100%, 66%);
    --btn-shadow-color: hsla(210, 100%, 56%, 0.3);

    --btn-secondary-bg-color: hsl(30, 100%, 40%);
    --btn-secondary-text-color: hsl(0, 0%, 100%);
    --btn-secondary-hover-bg-color: hsl(30, 100%, 50%);
    --btn-secondary-shadow-color: hsla(30, 100%, 40%, 0.3);

    /* LINK COLORS */
    --link-color: hsl(210, 100%, 56%);
    --link-hover-color: hsl(30, 100%, 50%);

    --success-color: hsl(125, 100%, 15%);

    /* TEXT COLORS */
    --text-red: hsl(0,91%,49%);
    --text-yellow: hsl(58,84%,54%);
    --text-orange: hsl(30, 100%, 50%);
    --text-green: hsl(128,89%,51%);
    --text-gray: hsl(0, 0%, 70%);

    /* CARD COLORS */
    --bg-card-header: hsl(0, 0%, 11%);  /* Changed - slightly lighter than before */
    --bg-card-body: hsl(0, 0%, 13%);

    /* LIST COLORS */
    --bg-list-group: hsl(0, 0%, 18%);  /* Changed - darker for better contrast */
}

[data-bs-theme=light] {
    --bg-color: hsl(210, 100%, 98%);
    --bg-secondary: hsl(0, 0%, 97%);  /* Added - slightly darker than bg-color */
    --text-color: hsl(210, 15%, 20%);
    --heading-color: hsl(210, 15%, 10%);
    --shadow-color: hsla(0, 0%, 0%, 0.15);
    --border: hsl(0, 0%, 90%);  /* Added - subtle border color */
    --bg-hover: hsl(0, 0%, 95%);  /* Added - hover state background */

    --btn-primary-bg-color: hsl(210, 100%, 50%);
    --btn-primary-text-color: hsl(0, 0%, 100%);
    --btn-primary-hover-bg-color: hsl(210, 100%, 60%);
    --btn-shadow-color: hsla(210, 100%, 50%, 0.3);

    --btn-secondary-bg-color: hsl(30, 100%, 50%);
    --btn-secondary-text-color: hsl(210, 20%, 20%);
    --btn-secondary-hover-bg-color: hsl(30, 100%, 60%);
    --btn-secondary-shadow-color: hsla(30, 100%, 50%, 0.3);

    --link-color: hsl(210, 100%, 50%);
    --link-hover-color: hsl(30, 100%, 60%);

    --success-color: hsl(125, 100%, 50%);

    /* TEXT COLORS */
    --text-red: hsl(0,91%,49%);
    --text-yellow: hsl(58,84%,54%);
    --text-orange: hsl(30, 100%, 50%);
    --text-green: hsl(128,89%,51%);
    --text-gray: hsl(0, 0%, 40%);

    /* CARD COLORS */
    --bg-card-header: hsl(0, 0%, 98%);  /* Changed - very light gray */
    --bg-card-body: hsl(0, 0%, 100%);  /* Pure white for cards */

    /* LIST COLORS */
    --bg-list-group: hsl(0, 0%, 96%);  /* Changed - light gray for better contrast */
}

/*=============== BASE ===============*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    overflow-x: hidden;
}
  
body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
}
  
a {
    text-decoration: none;
}
  
li {
    list-style: none;
}
  
img {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    all: unset;
}

/*=============== REUSABLE CSS CLASSES ===============*/

/* Status Pulse */
.status-pulse {
    width: 12px;
    height: 12px;
    background: var(--eco-green);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.5);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(46, 125, 50, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}

/* Spinner color */
.spinner-eco {
    color: var(--eco-green);
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1150px) {
    :root {
        --normal-font-size: 1rem;
        --smaller-font-size: .813rem;
    }
}