/*
   ProPéptidos visual skins.

   The skin selector changes only design tokens and typography. The existing
   Unfold light, dark, and system modes remain the source of the .dark class.
*/

html[data-pp-theme="current"] {
  --pp-theme-accent: #7c3aed;
}

html[data-pp-theme="slate-blue"] {
  --font-sans: "Trebuchet MS", "OPS Inter", ui-sans-serif, system-ui, sans-serif;
  --border-radius: 5px;
  --color-primary-50: #eef5fb;
  --color-primary-100: #dceaf6;
  --color-primary-200: #bdd8ef;
  --color-primary-300: #96bedf;
  --color-primary-400: #669cc6;
  --color-primary-500: #3779b5;
  --color-primary-600: #2f6ca5;
  --color-primary-700: #275c8a;
  --color-primary-800: #214b6e;
  --color-primary-900: #18324c;
  --color-primary-950: #0d1d2c;
  --color-base-50: #f4f7fa;
  --color-base-100: #e9eff5;
  --color-base-200: #d7e0e9;
  --color-base-300: #bdc9d6;
  --color-base-400: #8c9bad;
  --color-base-500: #667789;
  --color-base-600: #4d5d6d;
  --color-base-700: #394957;
  --color-base-800: #273541;
  --color-base-900: #18232f;
  --color-base-950: #0e151d;
  --color-font-subtle-light: #667789;
  --color-font-default-light: #394957;
  --color-font-important-light: #18232f;
  --color-font-subtle-dark: #aebdca;
  --color-font-default-dark: #e6eef5;
  --color-font-important-dark: #f8fbff;
  --pp-theme-accent: #3779b5;
}

html.dark[data-pp-theme="slate-blue"] {
  --color-primary-50: #eaf4ff;
  --color-primary-100: #cfe5f6;
  --color-primary-200: #a7cee8;
  --color-primary-300: #7fb5d7;
  --color-primary-400: #669fc3;
  --color-primary-500: #5c9cce;
  --color-primary-600: #4f91c3;
  --color-primary-700: #3f78a6;
  --color-primary-800: #315e80;
  --color-primary-900: #24465d;
  --color-primary-950: #152b3b;
  --color-base-50: #263542;
  --color-base-100: #23313d;
  --color-base-200: #1f2c37;
  --color-base-300: #334654;
  --color-base-400: #718494;
  --color-base-500: #8fa1b0;
  --color-base-600: #aab9c5;
  --color-base-700: #344754;
  --color-base-800: #1c2b36;
  --color-base-900: #101b24;
  --color-base-950: #091119;
  --color-font-subtle-light: #8fa1b0;
  --color-font-default-light: #dce7ef;
  --color-font-important-light: #f4f9fc;
  --color-font-subtle-dark: #aebdca;
  --color-font-default-dark: #e6eef5;
  --color-font-important-dark: #f8fbff;
}

html[data-pp-theme="cool-burgundy"] {
  --font-sans: "OPS Inter", ui-sans-serif, system-ui, sans-serif;
  --border-radius: 9px;
  --color-primary-50: #fdf2f4;
  --color-primary-100: #f9e3e7;
  --color-primary-200: #f3c7d0;
  --color-primary-300: #e6a5b5;
  --color-primary-400: #c9788c;
  --color-primary-500: #a64b68;
  --color-primary-600: #8d3454;
  --color-primary-700: #742b46;
  --color-primary-800: #5d2238;
  --color-primary-900: #47182a;
  --color-primary-950: #2b0e19;
  --color-base-50: #f8f9fb;
  --color-base-100: #f0f2f5;
  --color-base-200: #e1e5ea;
  --color-base-300: #cdd3da;
  --color-base-400: #9ba5b0;
  --color-base-500: #737f8b;
  --color-base-600: #596571;
  --color-base-700: #414c57;
  --color-base-800: #2d3740;
  --color-base-900: #20282f;
  --color-base-950: #11161b;
  --color-font-subtle-light: #737f8b;
  --color-font-default-light: #414c57;
  --color-font-important-light: #20282f;
  --color-font-subtle-dark: #b8c0c8;
  --color-font-default-dark: #eef1f4;
  --color-font-important-dark: #ffffff;
  --pp-theme-accent: #8d3454;
}

html.dark[data-pp-theme="cool-burgundy"] {
  --color-primary-50: #fff0f4;
  --color-primary-100: #fbd9e2;
  --color-primary-200: #f1b4c5;
  --color-primary-300: #e28fa8;
  --color-primary-400: #d37b97;
  --color-primary-500: #d27592;
  --color-primary-600: #c56483;
  --color-primary-700: #a84d6b;
  --color-primary-800: #843c56;
  --color-primary-900: #632c42;
  --color-primary-950: #3d1927;
  --color-base-50: #2f353c;
  --color-base-100: #2a3037;
  --color-base-200: #252b32;
  --color-base-300: #3c4650;
  --color-base-400: #84909b;
  --color-base-500: #a3adb6;
  --color-base-600: #bdc6ce;
  --color-base-700: #424d58;
  --color-base-800: #222a31;
  --color-base-900: #171e24;
  --color-base-950: #0d1216;
  --color-font-subtle-light: #a3adb6;
  --color-font-default-light: #e2e7eb;
  --color-font-important-light: #f7f9fa;
  --color-font-subtle-dark: #b8c0c8;
  --color-font-default-dark: #eef1f4;
  --color-font-important-dark: #ffffff;
}

html[data-pp-theme="charcoal-lime"] {
  --font-sans: "OPS Inter", ui-sans-serif, system-ui, sans-serif;
  --border-radius: 7px;
  --color-primary-50: #f5f9e8;
  --color-primary-100: #e9f2c8;
  --color-primary-200: #d6e6a0;
  --color-primary-300: #bfd677;
  --color-primary-400: #a5bf50;
  --color-primary-500: #8ba936;
  --color-primary-600: #718b21;
  --color-primary-700: #5b711b;
  --color-primary-800: #465716;
  --color-primary-900: #354311;
  --color-primary-950: #1e260a;
  --color-base-50: #f3f4f2;
  --color-base-100: #e8ebe6;
  --color-base-200: #d5dad2;
  --color-base-300: #bdc5b9;
  --color-base-400: #8c9888;
  --color-base-500: #697568;
  --color-base-600: #515d51;
  --color-base-700: #3b443d;
  --color-base-800: #2d332f;
  --color-base-900: #242836;
  --color-base-950: #151916;
  --color-font-subtle-light: #697568;
  --color-font-default-light: #3b443d;
  --color-font-important-light: #242836;
  --color-font-subtle-dark: #adb8a7;
  --color-font-default-dark: #e7ede3;
  --color-font-important-dark: #f7fbf4;
  --pp-theme-accent: #718b21;
}

html.dark[data-pp-theme="charcoal-lime"] {
  --color-primary-50: #f4f9df;
  --color-primary-100: #e2efb4;
  --color-primary-200: #cadd7e;
  --color-primary-300: #b1c95a;
  --color-primary-400: #a9c451;
  --color-primary-500: #a8c650;
  --color-primary-600: #9dbb45;
  --color-primary-700: #7f9c32;
  --color-primary-800: #617724;
  --color-primary-900: #455719;
  --color-primary-950: #27320d;
  --color-base-50: #2f3830;
  --color-base-100: #2a322b;
  --color-base-200: #252c26;
  --color-base-300: #424d43;
  --color-base-400: #829080;
  --color-base-500: #a1af9f;
  --color-base-600: #bac7b6;
  --color-base-700: #465247;
  --color-base-800: #252d27;
  --color-base-900: #181e1a;
  --color-base-950: #0e120f;
  --color-font-subtle-light: #a1af9f;
  --color-font-default-light: #e0e8dc;
  --color-font-important-light: #f5faf2;
  --color-font-subtle-dark: #adb8a7;
  --color-font-default-dark: #e7ede3;
  --color-font-important-dark: #f7fbf4;
}

/* Skin-specific type and shell surfaces. */
html[data-pp-theme="slate-blue"] body,
html[data-pp-theme="slate-blue"] button,
html[data-pp-theme="slate-blue"] input,
html[data-pp-theme="slate-blue"] select,
html[data-pp-theme="slate-blue"] textarea {
  font-family: "Trebuchet MS", "OPS Inter", ui-sans-serif, system-ui, sans-serif;
}

html[data-pp-theme="charcoal-lime"] h1,
html[data-pp-theme="charcoal-lime"] h2,
html[data-pp-theme="charcoal-lime"] h3,
html[data-pp-theme="charcoal-lime"] h4,
html[data-pp-theme="charcoal-lime"] h5,
html[data-pp-theme="charcoal-lime"] h6,
html[data-pp-theme="charcoal-lime"] .text-important,
html[data-pp-theme="charcoal-lime"] #content h1,
html[data-pp-theme="charcoal-lime"] #content h2,
html[data-pp-theme="charcoal-lime"] #content h3 {
  font-family: Georgia, "Times New Roman", serif;
}

html[data-pp-theme="slate-blue"] #main,
html[data-pp-theme="cool-burgundy"] #main,
html[data-pp-theme="charcoal-lime"] #main {
  background-color: var(--color-base-50) !important;
}

html.dark[data-pp-theme="slate-blue"] body,
html.dark[data-pp-theme="cool-burgundy"] body,
html.dark[data-pp-theme="charcoal-lime"] body,
html.dark[data-pp-theme="slate-blue"] #main,
html.dark[data-pp-theme="cool-burgundy"] #main,
html.dark[data-pp-theme="charcoal-lime"] #main {
  background-color: var(--color-base-900) !important;
  color: var(--color-font-default-dark);
}

/* A few custom pages use plain white surfaces. Map those surfaces in dark mode. */
html.dark[data-pp-theme="slate-blue"] #content .bg-white,
html.dark[data-pp-theme="cool-burgundy"] #content .bg-white,
html.dark[data-pp-theme="charcoal-lime"] #content .bg-white,
html.dark[data-pp-theme="slate-blue"] #content-main .bg-white,
html.dark[data-pp-theme="cool-burgundy"] #content-main .bg-white,
html.dark[data-pp-theme="charcoal-lime"] #content-main .bg-white {
  background-color: var(--color-base-800) !important;
}

/* The selector itself stays visible in both color modes. */
#pp-theme-picker {
  align-items: center;
  display: flex;
  gap: .45rem;
  margin-left: .75rem;
  white-space: nowrap;
}

#pp-theme-picker label {
  color: var(--color-font-subtle-light);
  font-size: .7rem;
  font-weight: 600;
}

#pp-theme-picker select {
  appearance: auto;
  background: var(--color-base-50);
  border: 1px solid var(--color-base-200);
  border-radius: var(--border-radius, 6px);
  color: var(--color-font-default-light);
  font-size: .75rem;
  min-height: 32px;
  padding: .25rem .5rem;
}

html.dark #pp-theme-picker label {
  color: var(--color-font-subtle-dark);
}

html.dark #pp-theme-picker select {
  background: var(--color-base-800);
  border-color: var(--color-base-700);
  color: var(--color-font-default-dark);
}

@media (max-width: 720px) {
  #pp-theme-picker {
    margin-left: .4rem;
  }

  #pp-theme-picker label {
    display: none;
  }

  #pp-theme-picker select {
    max-width: 7.5rem;
  }
}