/* ================================================================
   Light theme — Gabalis / Solid State
   ----------------------------------------------------------------
   Activated by: localStorage.setItem('theme', 'light')
   Deactivated:  localStorage.removeItem('theme')
   Applied by:   html[data-theme="light"]  (set on page load by
                 the inline script in app.html)
   ================================================================ */

/* --- Gradient / body background -------------------------------- */

html[data-theme="light"],
html[data-theme="light"] * {
	--color-gradient-from: rgba(240, 220, 200, 1);   /* warm sandy cream  */
	--color-gradient-to:   rgba(255, 255, 255, 0.9); /* near-white at top */
}

/* --- Base text -------------------------------------------------- */

html[data-theme="light"] body,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
	color: #1c2d31;
}

/* --- Links ----------------------------------------------------- */

html[data-theme="light"] a {
	border-bottom-color: rgba(28, 45, 49, 0.3);
	color: #1c2d31;
}

html[data-theme="light"] a:hover {
	border-bottom-color: transparent;
	color: #1c2d31 !important;
}

/* --- Headings -------------------------------------------------- */

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
	color: #1c2d31;
}

/* --- Strong / b ------------------------------------------------ */

html[data-theme="light"] strong,
html[data-theme="light"] b {
	color: #1c2d31;
}

/* --- HR -------------------------------------------------------- */

html[data-theme="light"] hr {
	border-bottom-color: rgba(28, 45, 49, 0.15);
}

/* --- Blockquote ------------------------------------------------ */

html[data-theme="light"] blockquote {
	border-left-color: rgba(28, 45, 49, 0.15);
}

/* --- Code / pre ------------------------------------------------ */

html[data-theme="light"] pre,
html[data-theme="light"] code {
	background: rgba(28, 45, 49, 0.04);
	border-color: rgba(28, 45, 49, 0.15);
}

/* --- Table ----------------------------------------------------- */

html[data-theme="light"] table tbody tr {
	border-color: rgba(28, 45, 49, 0.12);
}

html[data-theme="light"] table tbody tr:nth-child(2n + 1) {
	background-color: rgba(28, 45, 49, 0.03);
}

html[data-theme="light"] table thead {
	border-bottom-color: rgba(28, 45, 49, 0.15);
}

html[data-theme="light"] table th {
	color: #1c2d31;
}

/* --- Label ----------------------------------------------------- */

html[data-theme="light"] label {
	color: #1c2d31;
}

/* --- Form inputs ----------------------------------------------- */

html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="url"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] select,
html[data-theme="light"] textarea {
	background: rgba(28, 45, 49, 0.04);
	border-color: rgba(28, 45, 49, 0.15);
}

html[data-theme="light"] input[type="text"]:focus,
html[data-theme="light"] input[type="password"]:focus,
html[data-theme="light"] input[type="email"]:focus,
html[data-theme="light"] input[type="tel"]:focus,
html[data-theme="light"] input[type="search"]:focus,
html[data-theme="light"] input[type="url"]:focus,
html[data-theme="light"] input[type="number"]:focus,
html[data-theme="light"] input[type="date"]:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
	border-color: #5b91a6;
}

/* Select dropdown arrow — recoloured for light bg */
html[data-theme="light"] select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(28,45,49,0.4)' /%3E%3C/svg%3E");
}

/* Native select dropdown options */
html[data-theme="light"] select option {
	color: #1c2d31;
	background: #e6f0f2;
}

/* --- Checkbox / Radio ----------------------------------------- */

html[data-theme="light"] input[type="checkbox"] + label,
html[data-theme="light"] input[type="radio"] + label {
	color: #1c2d31;
}

html[data-theme="light"] input[type="checkbox"] + label:before,
html[data-theme="light"] input[type="radio"] + label:before {
	background: rgba(28, 45, 49, 0.04);
	border-color: rgba(28, 45, 49, 0.15);
}

html[data-theme="light"] input[type="checkbox"]:checked + label:before,
html[data-theme="light"] input[type="radio"]:checked + label:before {
	background-color: #4c8196;
	border-color: #4c8196;
	color: #ffffff;
}

/* --- Buttons (default/outlined) -------------------------------- */

html[data-theme="light"] input[type="submit"],
html[data-theme="light"] input[type="reset"],
html[data-theme="light"] input[type="button"],
html[data-theme="light"] button,
html[data-theme="light"] .button {
	box-shadow: inset 0 0 0 2px rgba(28, 45, 49, 0.25);
	color: #1c2d31 !important;
}

html[data-theme="light"] input[type="submit"]:hover,
html[data-theme="light"] input[type="reset"]:hover,
html[data-theme="light"] input[type="button"]:hover,
html[data-theme="light"] button:hover,
html[data-theme="light"] .button:hover {
	background-color: rgba(28, 45, 49, 0.06);
}

html[data-theme="light"] input[type="submit"]:active,
html[data-theme="light"] input[type="reset"]:active,
html[data-theme="light"] input[type="button"]:active,
html[data-theme="light"] button:active,
html[data-theme="light"] .button:active {
	background-color: rgba(28, 45, 49, 0.10);
}

html[data-theme="light"] input[type="submit"].icon:before,
html[data-theme="light"] input[type="reset"].icon:before,
html[data-theme="light"] input[type="button"].icon:before,
html[data-theme="light"] button.icon:before,
html[data-theme="light"] .button.icon:before {
	color: rgba(28, 45, 49, 0.35);
}

/* Primary button keeps its teal — stays white text on teal bg */
html[data-theme="light"] input[type="submit"].primary,
html[data-theme="light"] input[type="reset"].primary,
html[data-theme="light"] input[type="button"].primary,
html[data-theme="light"] button.primary,
html[data-theme="light"] .button.primary {
	color: #ffffff !important;
}

/* --- Features articles ----------------------------------------- */

html[data-theme="light"] .features article {
	background-color: #dde9ec;
}

/* --- Main content header border -------------------------------- */

html[data-theme="light"] #main-content > header h2 {
	border-bottom-color: rgba(28, 45, 49, 0.15);
}

/* --- Banner heading border ------------------------------------- */

html[data-theme="light"] #banner h2 {
	border-bottom-color: rgba(28, 45, 49, 0.2);
}

/* --- Header ---------------------------------------------------- */

html[data-theme="light"] #header {
	background-color: rgba(220, 234, 238, 0.95);
}

html[data-theme="light"] #header nav a[href="#menu"] {
	box-shadow: inset 0 0 0 2px rgba(28, 45, 49, 0.2);
}

html[data-theme="light"] #header nav a[href="#menu"]:hover {
	background-color: rgba(28, 45, 49, 0.04);
}

html[data-theme="light"] #header nav a[href="#menu"]:active {
	background-color: rgba(28, 45, 49, 0.09);
}

/* Transparent variant (over banner) stays transparent */
html[data-theme="light"] #header.alt {
	background-color: transparent;
}

/* --- Menu overlay ---------------------------------------------- */

/* Menu inner bg stays teal (#4c8196); white text on it is fine */
html[data-theme="light"] #menu h2 {
	border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* --- Wrappers: dark teal-grey → very light teal-grey ----------- */
/*     Hue is preserved (~195°); lightness is mirrored           */

html[data-theme="light"] .wrapper                { --wrapper-bg: #e6f0f2; } /* was #2e3c41 */
html[data-theme="light"] .wrapper.style2         { --wrapper-bg: #dde9ec; } /* was #354349 */
html[data-theme="light"] .wrapper.style3         { --wrapper-bg: #d4e2e6; } /* was #3d4b51 */
html[data-theme="light"] .wrapper.style4         { --wrapper-bg: #cbdae0; } /* was #455358 */
html[data-theme="light"] .wrapper.style5         { --wrapper-bg: #c2d3da; } /* was #4d5b60 */
html[data-theme="light"] .wrapper.style6         { --wrapper-bg: #b9cbd4; } /* was #556267 */

/* Spotlight wrappers keep their medium teal — they act as accent */
/* colour blocks; white text on them is still correct             */

/* Container behind spotlight wrappers */
html[data-theme="light"] :has( > .wrapper.spotlight ) {
	background-color: #39697c; /* unchanged — spotlight gap colour */
}

/* Text colour inside non-spotlight wrappers */
html[data-theme="light"] .wrapper:not(.spotlight) {
	color: #1c2d31;
}

html[data-theme="light"] .wrapper:not(.spotlight) h1,
html[data-theme="light"] .wrapper:not(.spotlight) h2,
html[data-theme="light"] .wrapper:not(.spotlight) h3,
html[data-theme="light"] .wrapper:not(.spotlight) h4,
html[data-theme="light"] .wrapper:not(.spotlight) h5,
html[data-theme="light"] .wrapper:not(.spotlight) h6 {
	color: #1c2d31;
}

html[data-theme="light"] .wrapper:not(.spotlight) strong,
html[data-theme="light"] .wrapper:not(.spotlight) b {
	color: #1c2d31;
}

html[data-theme="light"] .wrapper:not(.spotlight) a {
	color: #2a6678;
	border-bottom-color: rgba(42, 102, 120, 0.4);
}

html[data-theme="light"] .wrapper:not(.spotlight) a:hover {
	color: #2a6678 !important;
	border-bottom-color: transparent;
}

/* Borders inside light wrappers */
html[data-theme="light"] .wrapper:not(.spotlight) hr {
	border-bottom-color: rgba(28, 45, 49, 0.15);
}

html[data-theme="light"] .wrapper:not(.spotlight) table tbody tr {
	border-color: rgba(28, 45, 49, 0.12);
}

html[data-theme="light"] .wrapper:not(.spotlight) table thead {
	border-bottom-color: rgba(28, 45, 49, 0.15);
}

/* --- Footer ---------------------------------------------------- */

html[data-theme="light"] #footer .copyright {
	border-top-color: rgba(28, 45, 49, 0.15);
}

html[data-theme="light"] #footer .copyright li {
	border-left-color: rgba(28, 45, 49, 0.15);
	color: rgba(28, 45, 49, 0.5);
}

html[data-theme="light"] #footer .copyright li a {
	color: inherit;
}

html[data-theme="light"] .footer-generic {
	color: rgba(28, 45, 49, 0.7);
}