/**
 * Branding theme palettes — set only 6 canonical vars per theme.
 * All derived tokens (buttons, fields, cards) come from branding_tokens.css.
 *
 * Source of truth: ExtensionBrandingPages::THEME_PALETTES
 * Add a new theme: 1) Add entry to THEME_PALETTES in extension_branding_pages.rb
 *                  2) Copy a block below and set the 6 hex values.
 * --color-text, --color-bg, --color-primary, --color-secondary, --color-accent, --base-color
 */

/* --- Default --- */
.branding-theme-default,
.branding-pricing-theme-default .theme-default,
.customers-login-page.branding-login-theme-default,
.branding-email-theme-default.email-preview-theme {
  --color-text: #0D1115;
  --color-bg: #F9FAFB;
  --color-primary: #006199;
  --color-secondary: #E9F2FC;
  --color-accent: #34DA3A;
  --base-color: #FFFFFF;
  --shadow-color: #0D1115;
}

/* Hot Purple */
.branding-theme-hot-purple,
.branding-pricing-theme-hot-purple .theme-default,
.customers-login-page.branding-login-theme-hot-purple,
.branding-email-theme-hot-purple.email-preview-theme {
  --color-text: #1D1C1D;
  --color-bg: #FFFFFF;
  --color-primary: #4A154B;
  --color-secondary: #F4EDE4;
  --color-accent: #ECB22E;
  --base-color: #FFFFFF;
  --shadow-color: #1D1C1D;
}
/* cyan */
.branding-theme-cyan,
.branding-pricing-theme-cyan .theme-default,
.customers-login-page.branding-login-theme-cyan,
.branding-email-theme-cyan.email-preview-theme {
  --color-text: #000000;
  --color-bg: #FFFFFF;
  --color-primary: #232F3E;
  --color-secondary: #E3E6E6;
  --color-accent: #00CCC9;
  --base-color: #FFFFFF;
  --shadow-color: #000000;
}
/* red */
.branding-theme-red,
.branding-pricing-theme-red .theme-default,
.customers-login-page.branding-login-theme-red,
.branding-email-theme-red.email-preview-theme {
  --color-text: #F1F1F1;
  --color-bg: #0F0F0F;
  --color-primary: #F1F1F1;
  --color-secondary: #272727;
  --color-accent: #FF0000;
  --base-color: #000000;
  --shadow-color: #272727;
}
/* rose pink */
.branding-theme-rose-pink,
.branding-pricing-theme-rose-pink .theme-default,
.customers-login-page.branding-login-theme-rose-pink,
.branding-email-theme-rose-pink.email-preview-theme {
  --color-text: #0D0C22;
  --color-bg: #FFFFFF;
  --color-primary: #0D0C22;
  --color-secondary: #F6F4EE;
  --color-accent: #EA4C7C;
  --base-color: #FFFFFF;
  --shadow-color: #0D0C22;
}
/* purple */
.branding-theme-purple,
.branding-pricing-theme-purple .theme-default,
.customers-login-page.branding-login-theme-purple,
.branding-email-theme-purple.email-preview-theme {
  --color-text: #0E111B;
  --color-bg: #FFFFFF;
  --color-primary: #1847F2;
  --color-secondary: #EAEAFA;
  --color-accent: #CA48F5;
  --base-color: #FFFFFF;
  --shadow-color: #0E111B;
}
/* electric blue */
.branding-theme-electric-blue,
.branding-pricing-theme-electric-blue .theme-default,
.customers-login-page.branding-login-theme-electric-blue,
.branding-email-theme-electric-blue.email-preview-theme {
  --color-text: #010024;
  --color-bg: #FAFAFF;
  --color-primary: #01058E;
  --color-secondary: #DBD9F7;
  --color-accent: #1D12E2;
  --base-color: #FFFFFF;
  --shadow-color: #010024;
}
/* Periwinkle */
.branding-theme-periwinkle,
.branding-pricing-theme-periwinkle .theme-default,
.customers-login-page.branding-login-theme-periwinkle,
.branding-email-theme-periwinkle.email-preview-theme {
  --color-text: #E8E9EB;
  --color-bg: #03050A;
  --color-primary: #84B3FF;
  --color-secondary: #02014C;
  --color-accent: #A8B2FF;
  --base-color: #000000;
  --shadow-color: #02014C;
}

/* --- Theme picker: swatch segment mapping --- */
.theme-swatch-bg { background-color: var(--color-bg); }
.theme-swatch-primary { background-color: var(--color-primary); }
.theme-swatch-secondary { background-color: var(--color-secondary); }
.theme-swatch-accent { background-color: var(--color-accent); }
.theme-swatch-text { background-color: var(--color-text); }

/* --- Theme picker: active option highlight (editor sidebar) --- */
.branding-theme-option--active {
  background-color: var(--color-neutral-700);
  color: var(--color-foreground);
}

/* --- Preview layout: desktop vs mobile --- */
.preview-layout-desktop {
  width: 100%;
  max-width: none;
}

.preview-layout-mobile {
  width: 375px;
  max-width: 100%;
  margin-inline: auto;
}

/* --- Fields / Theme tab buttons (editor header) --- */
.branding-tab-btn {
  background-color: transparent;
  border-color: unset;
  color: #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-neutral-600);
  cursor: pointer;
}

.branding-tab-btn:not(.branding-tab-btn--active):hover {
  color: #f5f5f5;
  background-color: #262626;
  border: 1px solid var(--color-neutral-400);
}

.branding-tab-btn--active, .branding-page-dropdown-item--active {
  background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
  color: var(--color-blue-300);
  border: none;
}

.toggle-group {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-neutral-600);
  border-radius: 8px;
  padding: 2px;
  gap: 4px;
}

.toggle-group:focus-within {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.toggle-group__button {
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.toggle-group__button:focus-visible {
  outline: none;
}

.toggle-group__button--active {
  background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
  color: var(--color-blue-300);
  border: none;
  border-radius: 6px;
}