/* ========================================
   Color Palettes (Dynamic Themes)
   ========================================
   Formula-generated, not hand-picked. One random palette is applied per
   visit as a body.palette-N class (see js/content.js).

   Rule: hues are spaced evenly around the wheel (360/20 = 18deg apart) so
   the 20 palettes always feel like variations of one brand, not 20 unrelated
   gradients. Every background is forced into the same dark lightness band
   (S 55-60%, L 14-18%), which is what makes a single shared --text-color
   formula (hue-tinted off-white) safely readable against ALL 20 palettes —
   no more deciding light-vs-dark text per palette by eye. --accent-color
   sits at the base hue +165..195deg (near-complementary) at high
   saturation/lightness, so it always pops against its own palette's dark,
   desaturated-relative background regardless of which hue landed where.
   ======================================== */

body.palette-1 {
    --bg-gradient: linear-gradient(135deg, hsl(346 55% 14%), hsl(8 60% 18%), hsl(30 55% 14%));
    --text-color: hsl(8 8% 94%);
    --accent-color: hsl(173 90% 60%);
}

body.palette-2 {
    --bg-gradient: linear-gradient(135deg, hsl(4 55% 14%), hsl(26 60% 18%), hsl(48 55% 14%));
    --text-color: hsl(26 8% 94%);
    --accent-color: hsl(206 90% 60%);
}

body.palette-3 {
    --bg-gradient: linear-gradient(135deg, hsl(22 55% 14%), hsl(44 60% 18%), hsl(66 55% 14%));
    --text-color: hsl(44 8% 94%);
    --accent-color: hsl(239 90% 60%);
}

body.palette-4 {
    --bg-gradient: linear-gradient(135deg, hsl(40 55% 14%), hsl(62 60% 18%), hsl(84 55% 14%));
    --text-color: hsl(62 8% 94%);
    --accent-color: hsl(227 90% 60%);
}

body.palette-5 {
    --bg-gradient: linear-gradient(135deg, hsl(58 55% 14%), hsl(80 60% 18%), hsl(102 55% 14%));
    --text-color: hsl(80 8% 94%);
    --accent-color: hsl(260 90% 60%);
}

body.palette-6 {
    --bg-gradient: linear-gradient(135deg, hsl(76 55% 14%), hsl(98 60% 18%), hsl(120 55% 14%));
    --text-color: hsl(98 8% 94%);
    --accent-color: hsl(293 90% 60%);
}

body.palette-7 {
    --bg-gradient: linear-gradient(135deg, hsl(94 55% 14%), hsl(116 60% 18%), hsl(138 55% 14%));
    --text-color: hsl(116 8% 94%);
    --accent-color: hsl(281 90% 60%);
}

body.palette-8 {
    --bg-gradient: linear-gradient(135deg, hsl(112 55% 14%), hsl(134 60% 18%), hsl(156 55% 14%));
    --text-color: hsl(134 8% 94%);
    --accent-color: hsl(314 90% 60%);
}

body.palette-9 {
    --bg-gradient: linear-gradient(135deg, hsl(130 55% 14%), hsl(152 60% 18%), hsl(174 55% 14%));
    --text-color: hsl(152 8% 94%);
    --accent-color: hsl(347 90% 60%);
}

body.palette-10 {
    --bg-gradient: linear-gradient(135deg, hsl(148 55% 14%), hsl(170 60% 18%), hsl(192 55% 14%));
    --text-color: hsl(170 8% 94%);
    --accent-color: hsl(335 90% 60%);
}

body.palette-11 {
    --bg-gradient: linear-gradient(135deg, hsl(166 55% 14%), hsl(188 60% 18%), hsl(210 55% 14%));
    --text-color: hsl(188 8% 94%);
    --accent-color: hsl(8 90% 60%);
}

body.palette-12 {
    --bg-gradient: linear-gradient(135deg, hsl(184 55% 14%), hsl(206 60% 18%), hsl(228 55% 14%));
    --text-color: hsl(206 8% 94%);
    --accent-color: hsl(41 90% 60%);
}

body.palette-13 {
    --bg-gradient: linear-gradient(135deg, hsl(202 55% 14%), hsl(224 60% 18%), hsl(246 55% 14%));
    --text-color: hsl(224 8% 94%);
    --accent-color: hsl(29 90% 60%);
}

body.palette-14 {
    --bg-gradient: linear-gradient(135deg, hsl(220 55% 14%), hsl(242 60% 18%), hsl(264 55% 14%));
    --text-color: hsl(242 8% 94%);
    --accent-color: hsl(62 90% 60%);
}

body.palette-15 {
    --bg-gradient: linear-gradient(135deg, hsl(238 55% 14%), hsl(260 60% 18%), hsl(282 55% 14%));
    --text-color: hsl(260 8% 94%);
    --accent-color: hsl(95 90% 60%);
}

body.palette-16 {
    --bg-gradient: linear-gradient(135deg, hsl(256 55% 14%), hsl(278 60% 18%), hsl(300 55% 14%));
    --text-color: hsl(278 8% 94%);
    --accent-color: hsl(83 90% 60%);
}

body.palette-17 {
    --bg-gradient: linear-gradient(135deg, hsl(274 55% 14%), hsl(296 60% 18%), hsl(318 55% 14%));
    --text-color: hsl(296 8% 94%);
    --accent-color: hsl(116 90% 60%);
}

body.palette-18 {
    --bg-gradient: linear-gradient(135deg, hsl(292 55% 14%), hsl(314 60% 18%), hsl(336 55% 14%));
    --text-color: hsl(314 8% 94%);
    --accent-color: hsl(149 90% 60%);
}

body.palette-19 {
    --bg-gradient: linear-gradient(135deg, hsl(310 55% 14%), hsl(332 60% 18%), hsl(354 55% 14%));
    --text-color: hsl(332 8% 94%);
    --accent-color: hsl(137 90% 60%);
}

body.palette-20 {
    --bg-gradient: linear-gradient(135deg, hsl(328 55% 14%), hsl(350 60% 18%), hsl(12 55% 14%));
    --text-color: hsl(350 8% 94%);
    --accent-color: hsl(170 90% 60%);
}