/* =============================================
   1. Global Palette Definitions
   These variables are available everywhere, allowing the Settings UI
   to display all colors regardless of the active theme.
   ============================================= */

:root {
	/* Dark Mode / Default HSL Values */
	--theme-color-red: 358, 74%, 55%;
	--theme-color-blue: 217, 71%, 60%;
	--theme-color-green: 142, 64%, 45%;
	--theme-color-yellow: 42, 92%, 55%;
	--theme-color-pink: 330, 65%, 65%;
	--theme-color-cyan: 187, 72%, 55%;
	--theme-color-purple: 270, 55%, 65%;
	--theme-color-orange: 22, 85%, 60%;
	--theme-color-black: 0, 0%, 60%;
}

body.graphiql-light {
	/* Light Mode HSL Values */
	--theme-color-red: 358, 74%, 35%;
	--theme-color-blue: 217, 71%, 45%;
	--theme-color-green: 142, 64%, 32%;
	--theme-color-yellow: 42, 92%, 35%;
	--theme-color-pink: 330, 65%, 45%;
	--theme-color-cyan: 187, 72%, 38%;
	--theme-color-purple: 270, 55%, 45%;
	--theme-color-orange: 22, 85%, 45%;
	--theme-color-black: 0, 0%, 25%;
}

/* =============================================
   2. Theme Activations
   We target html.theme-{color} because theme.js applies the class to documentElement.
   We also support body.theme-{color} just in case.
   ============================================= */

/* Red (default) */
html.theme-red body:not(.graphiql-light),
body.theme-red:not(.graphiql-light),
body:not(.graphiql-light) .theme-red {
	--color-red: var(--theme-color-red) !important;
	--color-primary: var(--theme-color-red) !important;
	--color-secondary: 220, 44%, 60% !important;
	--color-tertiary: 180, 100%, 75% !important;
	--color-info: 208, 100%, 75% !important;
	--color-success: 142, 100%, 65% !important;
	--color-warning: 42, 100%, 75% !important;
	--color-error: 10, 100%, 70% !important;
}

html.theme-red body.graphiql-light,
body.theme-red.graphiql-light,
body.graphiql-light .theme-red {
	--color-red: var(--theme-color-red) !important;
	--color-primary: var(--theme-color-red) !important;
	--color-secondary: 220, 44%, 43% !important;
	--color-tertiary: 180, 100%, 25% !important;
	--color-info: 208, 90%, 35% !important;
	--color-success: 142, 80%, 30% !important;
	--color-warning: 42, 90%, 35% !important;
	--color-error: 10, 80%, 40% !important;
}

/* Blue */
html.theme-blue body:not(.graphiql-light),
body.theme-blue:not(.graphiql-light),
body:not(.graphiql-light) .theme-blue {
	--color-blue: var(--theme-color-blue) !important;
	--color-primary: var(--theme-color-blue) !important;
	--color-secondary: 240, 48%, 70% !important;
	--color-tertiary: 190, 90%, 80% !important;
	--color-info: 208, 100%, 75% !important;
	--color-success: 142, 100%, 65% !important;
	--color-warning: 42, 100%, 75% !important;
	--color-error: 10, 100%, 70% !important;
}

html.theme-blue body.graphiql-light,
body.theme-blue.graphiql-light,
body.graphiql-light .theme-blue {
	--color-blue: var(--theme-color-blue) !important;
	--color-primary: var(--theme-color-blue) !important;
	--color-secondary: 240, 48%, 55% !important;
	--color-tertiary: 190, 90%, 30% !important;
	--color-info: 208, 90%, 35% !important;
	--color-success: 142, 80%, 30% !important;
	--color-warning: 42, 90%, 35% !important;
	--color-error: 10, 80%, 40% !important;
}

/* Green */
html.theme-green body:not(.graphiql-light),
body.theme-green:not(.graphiql-light),
body:not(.graphiql-light) .theme-green {
	--color-green: var(--theme-color-green) !important;
	--color-primary: var(--theme-color-green) !important;
	--color-secondary: 160, 50%, 55% !important;
	--color-tertiary: 120, 60%, 80% !important;
	--color-info: 208, 100%, 75% !important;
	--color-success: 142, 100%, 65% !important;
	--color-warning: 42, 100%, 75% !important;
	--color-error: 10, 100%, 70% !important;
}

html.theme-green body.graphiql-light,
body.theme-green.graphiql-light,
body.graphiql-light .theme-green {
	--color-green: var(--theme-color-green) !important;
	--color-primary: var(--theme-color-green) !important;
	--color-secondary: 160, 50%, 40% !important;
	--color-tertiary: 120, 70%, 25% !important;
	--color-info: 208, 90%, 35% !important;
	--color-success: 142, 80%, 30% !important;
	--color-warning: 42, 90%, 35% !important;
	--color-error: 10, 80%, 40% !important;
}

/* Yellow */
html.theme-yellow body:not(.graphiql-light),
body.theme-yellow:not(.graphiql-light),
body:not(.graphiql-light) .theme-yellow {
	--color-yellow: var(--theme-color-yellow) !important;
	--color-primary: var(--theme-color-yellow) !important;
	--color-secondary: 30, 70%, 55% !important;
	--color-tertiary: 50, 100%, 75% !important;
	--color-info: 208, 100%, 75% !important;
	--color-success: 142, 100%, 65% !important;
	--color-warning: 42, 100%, 75% !important;
	--color-error: 10, 100%, 70% !important;
}

html.theme-yellow body.graphiql-light,
body.theme-yellow.graphiql-light,
body.graphiql-light .theme-yellow {
	--color-yellow: var(--theme-color-yellow) !important;
	--color-primary: var(--theme-color-yellow) !important;
	--color-secondary: 30, 70%, 40% !important;
	--color-tertiary: 50, 100%, 25% !important;
	--color-info: 208, 90%, 35% !important;
	--color-success: 142, 80%, 30% !important;
	--color-warning: 42, 90%, 35% !important;
	--color-error: 10, 80%, 40% !important;
}

/* Pink */
html.theme-pink body:not(.graphiql-light),
body.theme-pink:not(.graphiql-light),
body:not(.graphiql-light) .theme-pink {
	--color-pink: var(--theme-color-pink) !important;
	--color-primary: var(--theme-color-pink) !important;
	--color-secondary: 300, 45%, 60% !important;
	--color-tertiary: 350, 80%, 80% !important;
	--color-info: 208, 100%, 75% !important;
	--color-success: 142, 100%, 65% !important;
	--color-warning: 42, 100%, 75% !important;
	--color-error: 10, 100%, 70% !important;
}

html.theme-pink body.graphiql-light,
body.theme-pink.graphiql-light,
body.graphiql-light .theme-pink {
	--color-pink: var(--theme-color-pink) !important;
	--color-primary: var(--theme-color-pink) !important;
	--color-secondary: 300, 45%, 45% !important;
	--color-tertiary: 350, 80%, 30% !important;
	--color-info: 208, 90%, 35% !important;
	--color-success: 142, 80%, 30% !important;
	--color-warning: 42, 90%, 35% !important;
	--color-error: 10, 80%, 40% !important;
}

/* Cyan */
html.theme-cyan body:not(.graphiql-light),
body.theme-cyan:not(.graphiql-light),
body:not(.graphiql-light) .theme-cyan {
	--color-cyan: var(--theme-color-cyan) !important;
	--color-primary: var(--theme-color-cyan) !important;
	--color-secondary: 200, 60%, 65% !important;
	--color-tertiary: 170, 80%, 80% !important;
	--color-info: 208, 100%, 75% !important;
	--color-success: 142, 100%, 65% !important;
	--color-warning: 42, 100%, 75% !important;
	--color-error: 10, 100%, 70% !important;
}

html.theme-cyan body.graphiql-light,
body.theme-cyan.graphiql-light,
body.graphiql-light .theme-cyan {
	--color-cyan: var(--theme-color-cyan) !important;
	--color-primary: var(--theme-color-cyan) !important;
	--color-secondary: 200, 60%, 45% !important;
	--color-tertiary: 170, 90%, 25% !important;
	--color-info: 208, 90%, 35% !important;
	--color-success: 142, 80%, 30% !important;
	--color-warning: 42, 90%, 35% !important;
	--color-error: 10, 80%, 40% !important;
}

/* Purple */
html.theme-purple body:not(.graphiql-light),
body.theme-purple:not(.graphiql-light),
body:not(.graphiql-light) .theme-purple {
	--color-purple: var(--theme-color-purple) !important;
	--color-primary: var(--theme-color-purple) !important;
	--color-secondary: 250, 50%, 70% !important;
	--color-tertiary: 290, 70%, 80% !important;
	--color-info: 208, 100%, 75% !important;
	--color-success: 142, 100%, 65% !important;
	--color-warning: 42, 100%, 75% !important;
	--color-error: 10, 100%, 70% !important;
}

html.theme-purple body.graphiql-light,
body.theme-purple.graphiql-light,
body.graphiql-light .theme-purple {
	--color-purple: var(--theme-color-purple) !important;
	--color-primary: var(--theme-color-purple) !important;
	--color-secondary: 250, 50%, 50% !important;
	--color-tertiary: 290, 70%, 30% !important;
	--color-info: 208, 90%, 35% !important;
	--color-success: 142, 80%, 30% !important;
	--color-warning: 42, 90%, 35% !important;
	--color-error: 10, 80%, 40% !important;
}

/* Orange */
html.theme-orange body:not(.graphiql-light),
body.theme-orange:not(.graphiql-light),
body:not(.graphiql-light) .theme-orange {
	--color-orange: var(--theme-color-orange) !important;
	--color-primary: var(--theme-color-orange) !important;
	--color-secondary: 12, 70%, 55% !important;
	--color-tertiary: 35, 95%, 75% !important;
	--color-info: 208, 100%, 75% !important;
	--color-success: 142, 100%, 65% !important;
	--color-warning: 42, 100%, 75% !important;
	--color-error: 10, 100%, 70% !important;
}

html.theme-orange body.graphiql-light,
body.theme-orange.graphiql-light,
body.graphiql-light .theme-orange {
	--color-orange: var(--theme-color-orange) !important;
	--color-primary: var(--theme-color-orange) !important;
	--color-secondary: 12, 70%, 40% !important;
	--color-tertiary: 35, 100%, 25% !important;
	--color-info: 208, 90%, 35% !important;
	--color-success: 142, 80%, 30% !important;
	--color-warning: 42, 90%, 35% !important;
	--color-error: 10, 80%, 40% !important;
}

/* Black */
html.theme-black body:not(.graphiql-light),
body.theme-black:not(.graphiql-light),
body:not(.graphiql-light) .theme-black {
	--color-black: var(--theme-color-black) !important;
	--color-primary: var(--theme-color-black) !important;
	--color-secondary: 0, 0%, 70% !important;
	--color-tertiary: 0, 0%, 85% !important;
	--color-info: 208, 100%, 75% !important;
	--color-success: 142, 100%, 65% !important;
	--color-warning: 42, 100%, 75% !important;
	--color-error: 10, 100%, 70% !important;
}

html.theme-black body.graphiql-light,
body.theme-black.graphiql-light,
body.graphiql-light .theme-black {
	--color-black: var(--theme-color-black) !important;
	--color-primary: var(--theme-color-black) !important;
	--color-secondary: 0, 0%, 35% !important;
	--color-tertiary: 0, 0%, 15% !important;
	--color-info: 208, 90%, 35% !important;
	--color-success: 142, 80%, 30% !important;
	--color-warning: 42, 90%, 35% !important;
	--color-error: 10, 80%, 40% !important;
}