/*
    break-small: 600px
    break-medium: 782px
    break-large: 960px
    break-wide: 1280px
*/

/* Define all CSS variables here, then refer to them in theme.json, should be imported into style.css */
:root {
    /* Status Colors */
    --color-happy: #35C859;
    --color-mad: #D64545; /* Adjusted to be slightly more vibrant to match the blue */
    --color-less-mad: #fcabab;

    /* Palette - Greys (adjusted to "Cool Grey" to match your #2C3338 main text) */
    --color-light: #7E8890; /* Darkened from #aaaaaa for accessibility */
    --color-lighter: #DDE2E6; /* Slight blue tint added */
    --color-coolgray: #E1E4E8; /* Cool grey tint */

    /* Text Colors */
    --color-text: #2C3338; /* LOCKED: Main Text */
    --color-text-inv:#FFFFFF;
    --color-text-mid: #5F676D; /* Adjusted from #636363 to match cool-grey tone */
    --color-slate: #3B5060;
    --color-text-light: var(--color-light); /* Now passes WCAG AA for large text */
    --color-text-lighter: #9FA7AD; /* Adjusted for placeholders, visible but subtle */
    --color-text-placeholder: #BFC4CB;

    /* Accent Colors */
    --color-accent: #0594db; /* LOCKED: Main Accent */
    --color-accent-stronger: #005F8F; /* Darker shade for hovers. */
    --color-accent-highlight: #00B5EE; /* Added: Kept the cyan here if you need a "bright" pop */
    --color-accent-alt: #9053D5;

    /* Borders & Backgrounds */
    --color-border: #979797;
    --color-border-light: var(--color-coolgray);
    --bg-color: #FFFFFF;
    --bg-color-med: #f0f2f5;
    --bg-color-inv: #2C3338;
    --bg-color-light: #F6F7F8; /* Cool grey tint to match palette */
    --width-border: 1px;

    --radius-small:6px;
    --radius-med:10px;
    --radius-large:0.75rem;

    /* links and buttons */
    --color-link: var(--color-accent);
    --color-link-alt: var(--color-text);
    --color-button: transparent;
    --color-button-text: var(--color-text);
    --border-button: 2px solid var(--color-text);
    --radius-button: var(--radius-med);
    --padding-button: 1rem;
    --font-weight-button: 400;

    --color-button-primary: var(--color-accent); /* Usually main buttons use the base accent */
    --color-button-primary-hover: var(--color-accent-stronger); /* Added for hover states */
    --color-button-primary-text: var(--color-text-inv);
    --border-button-primary: 2px solid var(--color-accent);

    --color-button-secondary-text: var(--color-accent);
    --border-button-secondary: 2px solid var(--color-accent);

    /* panels */
    --bg-color-panel: var(--bg-color);
    --border-panel: none;
    --shadow-panel: rgb(100 100 111 / 33%) 0px 0px 1rem 0.25rem;
    --hr-width: var(--width-border);

    /* gradients */
    --gradient-accent: linear-gradient(76deg, #56C6F1 0%, #4847F5 24%, #712BE7 50%, #9B34BA 70%, #A937AB 77%, #E6558C 100%);
    --gradient-to-light-bg: linear-gradient(180deg, var(--bg-color) 0%, var(--bg-color-light) 100%);
    --gradient-footer: linear-gradient(180deg, #2C3338 95%, #1B1F20 100%);

    /* site dimensions */
    --site-min-width: 350px;
    --site-padding-width: 1rem;
    --vertical-block-offset: clamp(1.75rem, 8vw, 4rem);
    --narrow-content-padding: 1.5rem;

    --elevation-page: 0;
    --elevation-page-menus: 1000;
    --elevation-base: 2000;
    --elevation-low: 3000;
    --elevation-normal: 4000;
    --elevation-high: 5000;
    --elevation-very-high: 10000;

    /* content spacing */
    --spacer-sm: 0.5em;
    --spacer-md: 0.75em;
    --spacer-lg: 1.5em;
    --spacer-xl: 2em;
}

/* Sticky header sizing */
:root { --sticky-header-height: 3rem; }
/* Widescreen sizing */
@media (min-width: 960px) {
    :root { --sticky-header-height: 6rem; }
}

/* Widescreen sizing */
@media (min-width: 960px) {
    :root {
        --site-padding-width: 2.5rem;
        --narrow-content-padding: 6rem;
    }
}

/* Elevation Classes */
.elevation-page {z-index: var(--elevation-page);}
.elevation-page-menus {z-index: var(--elevation-page-menus);}
.elevation-base {z-index: var(--elevation-base);}
.elevation-low {z-index: var(--elevation-low);}
.elevation-normal {z-index: var(--elevation-normal);}
.elevation-high {z-index: var(--elevation-high);}
.elevation-very-high {z-index: var(--elevation-very-high);}

/* Standardized content margin and spacing */
.margin-none {margin: 0 !important;} /* Fixed 'none' to '0' */
.margin-top-sm { margin-top: var(--spacer-sm);}
.margin-bottom-sm {margin-bottom: var(--spacer-sm);}
.margin-left-sm {margin-left: var(--spacer-sm);}
.margin-right-sm {margin-right: var(--spacer-sm);}
.margin-top-md { margin-top: var(--spacer-md);}
.margin-bottom-md {margin-bottom: var(--spacer-md);}
.margin-left-md {margin-left: var(--spacer-md);}
.margin-right-md {margin-right: var(--spacer-md);}
.margin-top-lg { margin-top: var(--spacer-lg);}
.margin-bottom-lg {margin-bottom: var(--spacer-lg);}
.margin-left-lg {margin-left: var(--spacer-lg);}
.margin-right-lg {margin-right: var(--spacer-lg);}
.margin-top-xl { margin-top: var(--spacer-xl);}
.margin-bottom-xl {margin-bottom: var(--spacer-xl);}
.margin-left-xl {margin-left: var(--spacer-xl);}
.margin-right-xl {margin-right: var(--spacer-xl);}

.padding-none {padding: 0 !important;} /* Fixed 'none' to '0' */
.padding-top-sm { padding-top: var(--spacer-sm);}
.padding-bottom-sm {padding-bottom: var(--spacer-sm);}
.padding-left-sm {padding-left: var(--spacer-sm);}
.padding-right-sm {padding-right: var(--spacer-sm);}
.padding-top-md { padding-top: var(--spacer-md);}
.padding-bottom-md {padding-bottom: var(--spacer-md);}
.padding-left-md {padding-left: var(--spacer-md);}
.padding-right-md {padding-right: var(--spacer-md);}
.padding-top-lg { padding-top: var(--spacer-lg);}
.padding-bottom-lg {padding-bottom: var(--spacer-lg);}
.padding-left-lg {padding-left: var(--spacer-lg);}
.padding-right-lg {padding-right: var(--spacer-lg);}
.padding-top-xl { padding-top: var(--spacer-xl);}
.padding-bottom-xl {padding-bottom: var(--spacer-xl);}
.padding-left-xl {padding-left: var(--spacer-xl);}
.padding-right-xl {padding-right: var(--spacer-xl);}

.flex-justify-center {justify-content: center;}
.flex-align-center {align-items: center;}

/* No margin starts */
:root :where(.is-layout-flow) > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}