/* ==========================================================================
   Theme picker (parent and child web apps). Generated swatch tokens mirror
   apps/core/themes.py; pages receive the chosen theme from base.html.
   ========================================================================== */
:root {
  --theme-ameen-0: #F7F9FD;
  --theme-ameen-1: #091729;
  --theme-ameen-2: #1A66DB;
  --theme-ameen-3: #F57829;
  --theme-ameen-4: #E8F2FF;
  --theme-family-embrace-0: #FAF8F5;
  --theme-family-embrace-1: #311E13;
  --theme-family-embrace-2: #53321D;
  --theme-family-embrace-3: #C96F4A;
  --theme-family-embrace-4: #E8CE80;
  --theme-safe-shield-0: #F7FAF9;
  --theme-safe-shield-1: #2D4A6F;
  --theme-safe-shield-2: #699B8E;
  --theme-safe-shield-3: #FF6E61;
  --theme-safe-shield-4: #A8D3E1;
  --theme-gentle-care-0: #FFF9F6;
  --theme-gentle-care-1: #5B3150;
  --theme-gentle-care-2: #A45B8C;
  --theme-gentle-care-3: #D95A3A;
  --theme-gentle-care-4: #F6D0A2;
  --theme-trusted-guardian-0: #F4FAFD;
  --theme-trusted-guardian-1: #1B2D4A;
  --theme-trusted-guardian-2: #2D6E9A;
  --theme-trusted-guardian-3: #4B89AA;
  --theme-trusted-guardian-4: #D2E8F4;
  --theme-little-dreamers-0: #FBF7FC;
  --theme-little-dreamers-1: #4E3C77;
  --theme-little-dreamers-2: #6E5B9A;
  --theme-little-dreamers-3: #B88CC5;
  --theme-little-dreamers-4: #EAB8E4;
  --theme-safe-home-0: #FBFCF4;
  --theme-safe-home-1: #315E55;
  --theme-safe-home-2: #7EE7CA;
  --theme-safe-home-3: #F79C8E;
  --theme-safe-home-4: #F9F3CA;
  --theme-parents-calm-0: #F5F5F0;
  --theme-parents-calm-1: #4F4D43;
  --theme-parents-calm-2: #6E6B5D;
  --theme-parents-calm-3: #A3A29D;
  --theme-parents-calm-4: #E2E2DA;
  --theme-confident-steps-0: #F4FFFF;
  --theme-confident-steps-1: #2F4F4F;
  --theme-confident-steps-2: #00CED1;
  --theme-confident-steps-3: #00BFFF;
  --theme-confident-steps-4: #E0FFFF;
  --theme-family-roots-0: #FFF9F4;
  --theme-family-roots-1: #6C3D28;
  --theme-family-roots-2: #A65E3A;
  --theme-family-roots-3: #C7754D;
  --theme-family-roots-4: #F2C4A6;
}

.ameen-theme-swatch--ameen-0 { background: var(--theme-ameen-0); }
.ameen-theme-swatch--ameen-1 { background: var(--theme-ameen-1); }
.ameen-theme-swatch--ameen-2 { background: var(--theme-ameen-2); }
.ameen-theme-swatch--ameen-3 { background: var(--theme-ameen-3); }
.ameen-theme-swatch--ameen-4 { background: var(--theme-ameen-4); }
.ameen-theme-swatch--family_embrace-0 { background: var(--theme-family-embrace-0); }
.ameen-theme-swatch--family_embrace-1 { background: var(--theme-family-embrace-1); }
.ameen-theme-swatch--family_embrace-2 { background: var(--theme-family-embrace-2); }
.ameen-theme-swatch--family_embrace-3 { background: var(--theme-family-embrace-3); }
.ameen-theme-swatch--family_embrace-4 { background: var(--theme-family-embrace-4); }
.ameen-theme-swatch--safe_shield-0 { background: var(--theme-safe-shield-0); }
.ameen-theme-swatch--safe_shield-1 { background: var(--theme-safe-shield-1); }
.ameen-theme-swatch--safe_shield-2 { background: var(--theme-safe-shield-2); }
.ameen-theme-swatch--safe_shield-3 { background: var(--theme-safe-shield-3); }
.ameen-theme-swatch--safe_shield-4 { background: var(--theme-safe-shield-4); }
.ameen-theme-swatch--gentle_care-0 { background: var(--theme-gentle-care-0); }
.ameen-theme-swatch--gentle_care-1 { background: var(--theme-gentle-care-1); }
.ameen-theme-swatch--gentle_care-2 { background: var(--theme-gentle-care-2); }
.ameen-theme-swatch--gentle_care-3 { background: var(--theme-gentle-care-3); }
.ameen-theme-swatch--gentle_care-4 { background: var(--theme-gentle-care-4); }
.ameen-theme-swatch--trusted_guardian-0 { background: var(--theme-trusted-guardian-0); }
.ameen-theme-swatch--trusted_guardian-1 { background: var(--theme-trusted-guardian-1); }
.ameen-theme-swatch--trusted_guardian-2 { background: var(--theme-trusted-guardian-2); }
.ameen-theme-swatch--trusted_guardian-3 { background: var(--theme-trusted-guardian-3); }
.ameen-theme-swatch--trusted_guardian-4 { background: var(--theme-trusted-guardian-4); }
.ameen-theme-swatch--little_dreamers-0 { background: var(--theme-little-dreamers-0); }
.ameen-theme-swatch--little_dreamers-1 { background: var(--theme-little-dreamers-1); }
.ameen-theme-swatch--little_dreamers-2 { background: var(--theme-little-dreamers-2); }
.ameen-theme-swatch--little_dreamers-3 { background: var(--theme-little-dreamers-3); }
.ameen-theme-swatch--little_dreamers-4 { background: var(--theme-little-dreamers-4); }
.ameen-theme-swatch--safe_home-0 { background: var(--theme-safe-home-0); }
.ameen-theme-swatch--safe_home-1 { background: var(--theme-safe-home-1); }
.ameen-theme-swatch--safe_home-2 { background: var(--theme-safe-home-2); }
.ameen-theme-swatch--safe_home-3 { background: var(--theme-safe-home-3); }
.ameen-theme-swatch--safe_home-4 { background: var(--theme-safe-home-4); }
.ameen-theme-swatch--parents_calm-0 { background: var(--theme-parents-calm-0); }
.ameen-theme-swatch--parents_calm-1 { background: var(--theme-parents-calm-1); }
.ameen-theme-swatch--parents_calm-2 { background: var(--theme-parents-calm-2); }
.ameen-theme-swatch--parents_calm-3 { background: var(--theme-parents-calm-3); }
.ameen-theme-swatch--parents_calm-4 { background: var(--theme-parents-calm-4); }
.ameen-theme-swatch--confident_steps-0 { background: var(--theme-confident-steps-0); }
.ameen-theme-swatch--confident_steps-1 { background: var(--theme-confident-steps-1); }
.ameen-theme-swatch--confident_steps-2 { background: var(--theme-confident-steps-2); }
.ameen-theme-swatch--confident_steps-3 { background: var(--theme-confident-steps-3); }
.ameen-theme-swatch--confident_steps-4 { background: var(--theme-confident-steps-4); }
.ameen-theme-swatch--family_roots-0 { background: var(--theme-family-roots-0); }
.ameen-theme-swatch--family_roots-1 { background: var(--theme-family-roots-1); }
.ameen-theme-swatch--family_roots-2 { background: var(--theme-family-roots-2); }
.ameen-theme-swatch--family_roots-3 { background: var(--theme-family-roots-3); }
.ameen-theme-swatch--family_roots-4 { background: var(--theme-family-roots-4); }

.ameen-theme-list { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.ameen-theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 22px;
  background: var(--jr-card-bg);
  border: 1px solid var(--jr-border);
  cursor: pointer;
}

.ameen-theme-card:has(input:checked) { border: 2px solid var(--jr-blue); }
.ameen-theme-card:has(input:focus-visible) { outline: 2px solid var(--jr-blue); outline-offset: 2px; }
.ameen-theme-card input { position: absolute; inset-block-start: 20px; inset-inline-end: 18px; accent-color: var(--jr-blue); }
.ameen-theme-card__name { font-weight: 700; font-size: 17px; color: var(--jr-ink); }
.ameen-theme-card__swatches { display: flex; gap: 8px; }
.ameen-theme-swatch { width: 48px; height: 58px; border-radius: 12px; border: 1px solid var(--jr-border); }
.ameen-theme-card__desc { font-size: 13px; line-height: 21px; color: var(--jr-slate); }