/*
 * Puget Song Custom Styles
 * Color Palette: Foggy Morning (Pacific Northwest)
 */

:root {
    /* Primary Colors */
    --ps-slate:      #4a5a6a;  /* Morning fog - primary/headers */
    --ps-sage:       #8a9a7a;  /* Moss/lichen - secondary */
    --ps-mist:       #fafaf8;  /* Mist - backgrounds */
    --ps-cedar:      #8a5a4a;  /* Cedar bark - accent/highlights */

    /* Extended Palette */
    --ps-slate-dark:  #3a4a5a;  /* Darker slate for hover states */
    --ps-slate-light: #6a7a8a;  /* Lighter slate for subtle elements */
    --ps-sage-light:  #a8b8a0;  /* Light sage for borders/dividers */
    --ps-text:        #2a2a2a;  /* Dark charcoal for body text */
    --ps-text-light:  #5a5a5a;  /* Lighter text for secondary content */
}

/* W3.CSS Color Overrides - use these classes in your HTML */
.ps-slate      { background-color: var(--ps-slate) !important; color: #fff !important; }
.ps-sage       { background-color: var(--ps-sage) !important; color: #fff !important; }
.ps-mist       { background-color: var(--ps-mist) !important; color: var(--ps-text) !important; }
.ps-cedar      { background-color: var(--ps-cedar) !important; color: #fff !important; }

.ps-text-slate { color: var(--ps-slate) !important; }
.ps-text-sage  { color: var(--ps-sage) !important; }
.ps-text-cedar { color: var(--ps-cedar) !important; }

/* Hover variants for buttons/links */
.ps-hover-slate:hover { background-color: var(--ps-slate-dark) !important; }
.ps-hover-cedar:hover { background-color: #7a4a3a !important; }

/* Link styling */
a {
    color: var(--ps-cedar);
}

a:hover {
    color: var(--ps-slate);
}