/* The three colour sets a business can pick for its villa websites
 * (Organization.website_theme, chosen on the Marketing page).
 *
 * Every Tailwind colour is a CSS variable (see src.css), so a theme just
 * swaps the variables - the website templates keep their ordinary class
 * names. Only the public website shell (templates/public/base_public.html)
 * sets data-site-theme, so the dashboard and guest pages are untouched.
 *
 * Each theme is six colours; the 50-900 steps below are worked out from
 * them (lighter = mixed with white, darker = mixed with black):
 *   bg, card, text, dark (main buttons and the dark band), accent, muted.
 * To change a theme, change those six and regenerate - don't hand-edit steps.
 */

/* Stone & Bronze: bg #F7F4EE, card #EDE7DD, text #1F1B16, dark #2B2620, accent #A07850, muted #6E665C */
[data-site-theme="stone"] {
  --c-sand-50: 247 244 238;
  --c-sand-100: 252 251 248;
  --c-sand-200: 237 231 221;
  --c-sand-300: 205 199 189;
  --c-sand-400: 167 160 150;
  --c-sand-500: 135 128 118;
  --c-sand-600: 110 102 92;
  --c-sand-700: 78 72 64;
  --c-sand-800: 55 50 43;
  --c-sand-900: 31 27 22;
  --c-ink-50: 247 244 238;
  --c-ink-100: 242 238 230;
  --c-ink-200: 237 231 221;
  --c-ink-300: 205 199 189;
  --c-ink-400: 167 160 150;
  --c-ink-500: 135 128 118;
  --c-ink-600: 110 102 92;
  --c-ink-700: 78 72 64;
  --c-ink-800: 55 50 43;
  --c-ink-900: 31 27 22;
  --c-teal-50: 244 239 234;
  --c-teal-100: 234 225 216;
  --c-teal-200: 219 204 188;
  --c-teal-300: 160 157 155;
  --c-teal-400: 128 125 121;
  --c-teal-500: 85 81 77;
  --c-teal-600: 43 38 32;
  --c-teal-700: 37 32 27;
  --c-teal-750: 37 32 27;
  --c-teal-800: 30 27 22;
  --c-teal-900: 25 22 19;
  --c-accent-50: 246 242 238;
  --c-accent-100: 236 228 220;
  --c-accent-200: 217 201 185;
  --c-accent-300: 198 174 150;
  --c-accent-400: 179 147 115;
  --c-accent-500: 160 120 80;
  --c-accent-600: 136 102 68;
  --c-accent-700: 109 82 54;
  --c-accent-800: 80 60 40;
  --c-accent-900: 56 42 28;
  --c-accent2-50: 246 242 238;
  --c-accent2-100: 236 228 220;
  --c-accent2-200: 217 201 185;
  --c-accent2-300: 198 174 150;
  --c-accent2-400: 179 147 115;
  --c-accent2-500: 160 120 80;
  --c-accent2-600: 136 102 68;
  --c-accent2-700: 109 82 54;
  --c-accent2-800: 80 60 40;
  --c-accent2-900: 56 42 28;
}

/* Jungle & Sand: bg #F5F1E8, card #EAE4D6, text #1C1F1A, dark #2F3D33, accent #B08D57, muted #66695F */
[data-site-theme="jungle"] {
  --c-sand-50: 245 241 232;
  --c-sand-100: 251 249 246;
  --c-sand-200: 234 228 214;
  --c-sand-300: 201 197 184;
  --c-sand-400: 161 160 149;
  --c-sand-500: 128 130 119;
  --c-sand-600: 102 105 95;
  --c-sand-700: 72 75 67;
  --c-sand-800: 50 53 47;
  --c-sand-900: 28 31 26;
  --c-ink-50: 245 241 232;
  --c-ink-100: 240 234 223;
  --c-ink-200: 234 228 214;
  --c-ink-300: 201 197 184;
  --c-ink-400: 161 160 149;
  --c-ink-500: 128 130 119;
  --c-ink-600: 102 105 95;
  --c-ink-700: 72 75 67;
  --c-ink-800: 50 53 47;
  --c-ink-900: 28 31 26;
  --c-teal-50: 246 241 235;
  --c-teal-100: 238 230 218;
  --c-teal-200: 225 212 191;
  --c-teal-300: 161 168 163;
  --c-teal-400: 130 139 133;
  --c-teal-500: 89 100 92;
  --c-teal-600: 47 61 51;
  --c-teal-700: 40 52 43;
  --c-teal-750: 40 52 43;
  --c-teal-800: 33 43 36;
  --c-teal-900: 27 35 30;
  --c-accent-50: 247 244 238;
  --c-accent-100: 239 232 221;
  --c-accent-200: 223 209 188;
  --c-accent-300: 208 187 154;
  --c-accent-400: 192 164 121;
  --c-accent-500: 176 141 87;
  --c-accent-600: 150 120 74;
  --c-accent-700: 120 96 59;
  --c-accent-800: 88 70 44;
  --c-accent-900: 62 49 30;
  --c-accent2-50: 247 244 238;
  --c-accent2-100: 239 232 221;
  --c-accent2-200: 223 209 188;
  --c-accent2-300: 208 187 154;
  --c-accent2-400: 192 164 121;
  --c-accent2-500: 176 141 87;
  --c-accent2-600: 150 120 74;
  --c-accent2-700: 120 96 59;
  --c-accent2-800: 88 70 44;
  --c-accent2-900: 62 49 30;
}

/* Ocean & Linen: bg #F8F6F1, card #ECE8DF, text #14202A, dark #1E3A44, accent #C2A27A, muted #5F6B70 */
[data-site-theme="ocean"] {
  --c-sand-50: 248 246 241;
  --c-sand-100: 252 251 249;
  --c-sand-200: 236 232 223;
  --c-sand-300: 201 201 195;
  --c-sand-400: 158 163 162;
  --c-sand-500: 123 132 134;
  --c-sand-600: 95 107 112;
  --c-sand-700: 65 77 84;
  --c-sand-800: 42 54 63;
  --c-sand-900: 20 32 42;
  --c-ink-50: 248 246 241;
  --c-ink-100: 242 239 232;
  --c-ink-200: 236 232 223;
  --c-ink-300: 201 201 195;
  --c-ink-400: 158 163 162;
  --c-ink-500: 123 132 134;
  --c-ink-600: 95 107 112;
  --c-ink-700: 65 77 84;
  --c-ink-800: 42 54 63;
  --c-ink-900: 20 32 42;
  --c-teal-50: 248 244 239;
  --c-teal-100: 242 235 226;
  --c-teal-200: 232 220 204;
  --c-teal-300: 154 166 171;
  --c-teal-400: 120 137 143;
  --c-teal-500: 75 97 105;
  --c-teal-600: 30 58 68;
  --c-teal-700: 26 49 58;
  --c-teal-750: 26 49 58;
  --c-teal-800: 21 41 48;
  --c-teal-900: 17 34 39;
  --c-accent-50: 249 246 242;
  --c-accent-100: 243 236 228;
  --c-accent-200: 231 218 202;
  --c-accent-300: 218 199 175;
  --c-accent-400: 206 181 149;
  --c-accent-500: 194 162 122;
  --c-accent-600: 165 138 104;
  --c-accent-700: 132 110 83;
  --c-accent-800: 97 81 61;
  --c-accent-900: 68 57 43;
  --c-accent2-50: 249 246 242;
  --c-accent2-100: 243 236 228;
  --c-accent2-200: 231 218 202;
  --c-accent2-300: 218 199 175;
  --c-accent2-400: 206 181 149;
  --c-accent2-500: 194 162 122;
  --c-accent2-600: 165 138 104;
  --c-accent2-700: 132 110 83;
  --c-accent2-800: 97 81 61;
  --c-accent2-900: 68 57 43;
}

/* Body text in Jost (or the picked font set, site_fonts.css) on every themed page, instead of the dashboard's Figtree.
 * :where() keeps it weak, so the serif rules below still win where set. */
html[data-site-theme],
:where([data-site-theme]) .font-sans {
  font-family: var(--site-body-font, "Jost", system-ui, sans-serif);
}

/* Headings in the guest-facing serif on every themed page (villa websites and
 * the guest stay page), instead of the dashboard's display font. :where()
 * keeps this weak, so a heading marked font-sans still stays sans. */
:where([data-site-theme]) :is(h1, h2, h3, h4, h5, h6),
:where([data-site-theme]) .font-display,
:where([data-site-theme]) .drp-tab-value {
  font-family: var(--site-heading-font, "Fraunces", Georgia, serif);
}

/* Buttons in the guest-facing serif on themed pages: real .btn buttons
 * ("Ask to book", "Copy", "See free villas") and the pill-shaped links and
 * labels marked .site-button (WhatsApp, "See all photos", "Ask", "Show"). */
:where([data-site-theme]) :is(.btn, .site-button) {
  font-family: var(--site-heading-font, "Fraunces", Georgia, serif);
}

/* The booking box's fields and dropdowns (and the lists the date picker and
 * unit picker open) in the serif too. */
:where([data-site-theme]) #book :is(input, select, textarea, label, button, li, [role="option"], .drp-trigger-label) {
  font-family: var(--site-heading-font, "Fraunces", Georgia, serif);
}