/* Colour themes (<html data-palette="...">), on top of light/dark mode.
 *
 * "classic" is the original look and has no rules here. The others recolour
 * the brand accent (the yellow buttons, focus rings, checkboxes, active nav),
 * the sidebar and the top of the page. Warning colours (amber, the soft
 * yellow tints) keep their meaning in every theme.
 *
 * The three LEGO Fan CoLab themes use fancolab.lego.com's colours: its black
 * navigation bar, and per programme a button colour and a section tint -
 *   Creators     #9C4BA1 / #F3C9F6
 *   Communities  #55AE78 / #B0EFC8
 *   Events       #3D5E9B / #C9DBFE
 * (White text on the Communities green is too faint to read, so its buttons
 * use dark text.) Each has a light and a dark variant: dark mode lightens
 * the colour so it stays readable on dark surfaces and tints the page top
 * with the colour instead of the pale tint.
 *
 * To add a theme: a block of variables below, an entry in
 * src/services/Palettes.hpp, and a swatch at the bottom.
 */
html[data-palette="creator"] {
  --p-accent: #9C4BA1; --p-accent-hover: #AE62B3; --p-accent-strong: #833C88; --p-ink: #FFFFFF;
  --p-control: #9C4BA1; --p-ring: #9C4BA1; --p-tint: #F3C9F6; --p-brand: #F3C9F6;
}
html[data-palette="community"] {
  --p-accent: #55AE78; --p-accent-hover: #6CBE8C; --p-accent-strong: #3F9762; --p-ink: #0B2416;
  --p-control: #3F9762; --p-ring: #55AE78; --p-tint: #B0EFC8; --p-brand: #B0EFC8;
}
html[data-palette="event"] {
  --p-accent: #3D5E9B; --p-accent-hover: #5072B0; --p-accent-strong: #304C80; --p-ink: #FFFFFF;
  --p-control: #3D5E9B; --p-ring: #3D5E9B; --p-tint: #C9DBFE; --p-brand: #C9DBFE;
}
/* Dark mode: each colour a step lighter, so it stays clear on dark surfaces;
   focus rings and checkboxes lighter still. */
html[data-palette="creator"][data-theme="dark"] {
  --p-accent: #B466B9; --p-accent-hover: #C482C8; --p-accent-strong: #9C4BA1; --p-ink: #FFFFFF;
  --p-control: #D29AD6; --p-ring: #D29AD6;
}
html[data-palette="community"][data-theme="dark"] {
  --p-accent: #5FBF85; --p-accent-hover: #7BCD9C; --p-accent-strong: #55AE78; --p-ink: #0B2416;
  --p-control: #8BD6A9; --p-ring: #8BD6A9;
}
html[data-palette="event"][data-theme="dark"] {
  --p-accent: #5577B8; --p-accent-hover: #6B8BC9; --p-accent-strong: #3D5E9B; --p-ink: #FFFFFF;
  --p-control: #9DB6E8; --p-ring: #9DB6E8;
}
/* All three: fancolab.lego.com's black navigation */
html[data-palette="creator"], html[data-palette="community"], html[data-palette="event"] {
  --p-sidebar: #101010; --p-sidebar-top: #000000;
  --p-sidebar-line: rgb(255 255 255 / 0.12); --p-sidebar-hover: rgb(255 255 255 / 0.10);
}

/* ── Accent ── */
html[data-palette]:not([data-palette="classic"]) :is(.bg-yellow-400, .bg-yellow-300) { background-color: var(--p-accent); }
html[data-palette]:not([data-palette="classic"]) .bg-yellow-500 { background-color: var(--p-accent-strong); }
html[data-palette]:not([data-palette="classic"]) .hover\:bg-yellow-300:hover,
html[data-palette]:not([data-palette="classic"]) .hover\:bg-yellow-400:hover { background-color: var(--p-accent-hover); }
html[data-palette]:not([data-palette="classic"]) :is(.bg-yellow-300, .bg-yellow-400, .bg-yellow-500):is(.text-gray-900, .text-gray-800, .text-black) { color: var(--p-ink); }
html[data-palette]:not([data-palette="classic"]) :is(.border-yellow-400, .border-yellow-300) { border-color: var(--p-accent); }
html[data-palette]:not([data-palette="classic"]) .hover\:border-yellow-400:hover { border-color: var(--p-accent); }
html[data-palette]:not([data-palette="classic"]) :is(.text-yellow-400, .text-yellow-300) { color: var(--p-accent); }
html[data-palette]:not([data-palette="classic"]) .hover\:text-yellow-400:hover { color: var(--p-accent); }
html[data-palette]:not([data-palette="classic"]) .text-yellow-600 { color: var(--p-accent-strong); }
html[data-palette]:not([data-palette="classic"]) .bg-yellow-400\/10 { background-color: color-mix(in srgb, var(--p-accent) 10%, transparent); }
html[data-palette]:not([data-palette="classic"]) .border-yellow-400\/20 { border-color: color-mix(in srgb, var(--p-accent) 20%, transparent); }
html[data-palette]:not([data-palette="classic"]) :is(.focus\:ring-yellow-400:focus, .focus\:ring-yellow-300:focus, .ring-yellow-300, .ring-yellow-200) {
  --tw-ring-color: var(--p-ring);
}
html[data-palette]:not([data-palette="classic"]) .accent-yellow-400 { accent-color: var(--p-control); }
html[data-palette]:not([data-palette="classic"]) :is(input[type=checkbox], input[type=radio], input[type=range]) { accent-color: var(--p-control); }
html[data-palette]:not([data-palette="classic"]) .from-yellow-400 { --tw-gradient-from: var(--p-accent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-palette]:not([data-palette="classic"]) .to-yellow-400 { --tw-gradient-to: var(--p-accent); }
html[data-palette]:not([data-palette="classic"]) :focus-visible { outline-color: var(--p-ring); }

/* ── Sidebar ── */
html[data-palette]:not([data-palette="classic"]) #sidebar { background: var(--p-sidebar); }
html[data-palette]:not([data-palette="classic"]) #sidebar .bg-gray-800 { background-color: var(--p-sidebar-top); }
html[data-palette]:not([data-palette="classic"]) #sidebar :is(.border-gray-700, .border-gray-800) { border-color: var(--p-sidebar-line); }
html[data-palette]:not([data-palette="classic"]) #sidebar .bg-gray-700 { background-color: var(--p-sidebar-hover); }
html[data-palette]:not([data-palette="classic"]) #sidebar .text-yellow-400 { color: var(--p-brand); }
html[data-palette]:not([data-palette="classic"]) #sidebar .hover\:bg-gray-700:hover,
html[data-palette]:not([data-palette="classic"]) .nav-inactive:hover,
html[data-palette]:not([data-palette="classic"]) .theme-btn:hover { background-color: var(--p-sidebar-hover); }
html[data-palette]:not([data-palette="classic"]) .nav-active,
html[data-palette]:not([data-palette="classic"])[data-theme-pref="light"]  .theme-btn[data-v="light"],
html[data-palette]:not([data-palette="classic"])[data-theme-pref="system"] .theme-btn[data-v="system"],
html[data-palette]:not([data-palette="classic"])[data-theme-pref="dark"]   .theme-btn[data-v="dark"] { background-color: var(--p-accent); color: var(--p-ink); }

/* ── Page: the section tint fading in at the top, as on fancolab.lego.com ── */
html[data-palette]:not([data-palette="classic"]) #main-content {
  background-image: linear-gradient(165deg, color-mix(in srgb, var(--p-tint) 70%, transparent), transparent 420px);
  background-repeat: no-repeat;
}
html[data-palette]:not([data-palette="classic"])[data-theme="dark"] #main-content {
  background-image: linear-gradient(165deg, color-mix(in srgb, var(--p-accent) 22%, transparent), transparent 420px);
}
/* Some pages' own content block is also #main-content (Schedule, Meetings,
   Events...): only the outer page area gets the tint, or the inner box
   shows a second, hard-edged copy of it. */
html[data-palette] #main-content #main-content { background-image: none; }

/* ── Swatches (theme pickers) ── */
.palette-swatch { display: inline-flex; width: 3.5rem; height: 2rem; border-radius: 0.5rem; overflow: hidden; border: 1px solid rgb(0 0 0 / 0.15); flex-shrink: 0; }
.palette-swatch > span { flex: 1; }
.palette-swatch[data-swatch="classic"]   > span:nth-child(1) { background: #111827; } .palette-swatch[data-swatch="classic"]   > span:nth-child(2) { background: #FACC15; } .palette-swatch[data-swatch="classic"]   > span:nth-child(3) { background: #F3F4F6; }
.palette-swatch[data-swatch="creator"]   > span:nth-child(1) { background: #101010; } .palette-swatch[data-swatch="creator"]   > span:nth-child(2) { background: #9C4BA1; } .palette-swatch[data-swatch="creator"]   > span:nth-child(3) { background: #F3C9F6; }
.palette-swatch[data-swatch="community"] > span:nth-child(1) { background: #101010; } .palette-swatch[data-swatch="community"] > span:nth-child(2) { background: #55AE78; } .palette-swatch[data-swatch="community"] > span:nth-child(3) { background: #B0EFC8; }
.palette-swatch[data-swatch="event"]     > span:nth-child(1) { background: #101010; } .palette-swatch[data-swatch="event"]     > span:nth-child(2) { background: #3D5E9B; } .palette-swatch[data-swatch="event"]     > span:nth-child(3) { background: #C9DBFE; }

/* Logo editor: a checkerboard shows where the logo is transparent */
.logo-checker {
  background-color: #fff;
  background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}