:root {
    --med-brand-light-blue: linear-gradient(to bottom, #cae1f0 0%, #90ABAE 100%);
    --med-brand-yellow: linear-gradient(to bottom, #fcb116 0%, #cc8700 100%);
    color: #eeeeee;
}

body {
    color: #f2f2f2; /* Off-white */
    
}

html {
    color: #eeeeee;
}

/********************************
 * 1) Basic "Gradient Button" Setup
 ********************************/
.gradient-button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    color: #f2f2f2; /* Off-white */
    padding: 0.1rem 0.3rem;
    margin: 5px; /* WPF 'Margin=5' or override later if needed */
    border: 1px solid #000; /* default border if not overridden */
    cursor: pointer;
    user-select: none;
    /* We'll have a default hover highlight: */
    transition: filter 0.1s ease-in-out;
}

    .gradient-button:hover {
        filter: brightness(1.1);
    }

    .gradient-button:active {
        filter: brightness(0.9);
    }

    .gradient-button:disabled {
        color: #ADADAD;
        opacity: 0.6;
        cursor: default;
    }

    /* Focus => pseudo "defaulted"? We'll add a separate class. */
    .gradient-button:focus {
        outline: none; /* We'll do a custom effect in .is-defaulted */
    }

/********************************
 * 2) "Focus-Defaulted" State
 ********************************/
/* If the JS sets .is-defaulted, we can give a glow or highlight. */
.is-defaulted {
    box-shadow: 0 0 0 2px #666;
    /* or outline: 1px solid #666; for a "default button" look */
}

/* 
   We'll apply .focus-defaulted in the HTML 
   so that on focus, we add .is-defaulted.
*/

/********************************
 * 3) "No Hover" Behavior
 ********************************/
/* If the button has .no-hover-highlight, 
   override the normal :hover behavior. 
*/
.no-hover-highlight:hover {
    filter: none !important;
}

/********************************
 * 4) Toggle Behavior
 ********************************/
/* A .toggle-button toggles .is-checked on click in JS. 
   We'll represent "RenderPressed" by a slight darkening or something. */
.toggle-button.is-checked {
    filter: brightness(0.85);
    /* or change background or border color, etc. */
}

/********************************
 * 5) Round Corner Classes
 ********************************/
.round-button-5 {
    border-radius: 5px;
    margin: 2px 5px; /* WPF said "Margin=5,2" => top/bottom=2, left/right=5 */
}

.round-button-8 {
    border-radius: 8px;
    margin: 2px 5px;
    color: #f2f2f2; /* Off-white */
}

.round-button-12 {
    border-radius: 12px;
    margin: 2px 5px;
}

.round-button-15 {
    border-radius: 15px;
    margin: 2px 5px;
}

/********************************
 * 6) Specific Gradients & Borders
 ********************************/
/* WPF "ButtonYellowBackground" => #F3F300..#CDCD00 
   "ButtonYellowBorder" => #707000
 */
.btn-yellow-bg {
    background: linear-gradient(to bottom, #F3F300 0%, #EBEB00 50%, #CDCD00 100%);
}

.btn-yellow-border {
    border-color: #707000;
}

/* Green background/border */
.btn-green-bg {
    background: linear-gradient(to bottom, #00F300 0%, #00EB00 50%, #00CD00 100%);
}

.btn-green-border {
    border-color: #007000;
}

/* Blue background/border */
.btn-blue-bg {
    background: linear-gradient(to bottom, #439FE5 0%, #3B89C5 50%, #3371A2 100%);
}

.btn-blue-border {
    border-color: #000070;
}

/* Grad1 => #338FD5..#236192, etc. */
.grad1 {
    background: linear-gradient(to bottom, #338FD5 0%, #2B79B5 50%, #236192 100%);
}

.grad2 {
    background: linear-gradient(to bottom, #439Fe5 0%, #3b89c5 50%, #3371a2 100%);
}

.grad3 {
    background: linear-gradient(to bottom, #53aFf5 0%, #4b99d5 50%, #4381b2 100%);
}

.grad4 {
    background: linear-gradient(to bottom, #63bFff 0%, #5ba9e5 50%, #5391c2 100%);
}

.grad5 {
    background: linear-gradient(to bottom, #73cFff 0%, #6bb9f5 50%, #63a1d2 100%);
}

.grad6 {
    background: linear-gradient(to bottom, #83dFff 0%, #7bc9f5 50%, #73b1e2 100%);
}

/* "MedBrandDarkBlueLGB" => #00558B..#064788 */
.med-brand-dark-blue {
    background: linear-gradient(to bottom, #00558B 0%, #064788 100%);
}
/* "MedBrandMediumBlueLGB" => #86b9d8..#5F93A0 */
.med-brand-medium-blue {
    background: linear-gradient(to bottom, #86b9d8 0%, #5F93A0 100%);
}

.med-brand-light-blue {
    background: var(--med-brand-light-blue);
}

.med-brand-yellow {
    background: var(--med-brand-yellow);
}


/* e.g. "ButtonLtBlueBorder" => #000070 */
.btn-ltblue-border {
    border-color: #000070;
}

/********************************
 * 7) Example Combined .lt-blue
 ********************************/
/* If you want a "ButtonStyleLtBlue" 
   that is based on the "ButtonStyleGradient" approach: 
   - background: grad1
   - border: #000070
*/

.ltblue-button {
    background: linear-gradient(to bottom, #338FD5 0%, #2B79B5 50%, #236192 100%);
    border-color: #000070;
}