/* Theme: cartoonfriends (light) */

/* -------------------------
   CARTOON FRIENDS — 🎈✨🗯️🐾
   Editable SVG assets (4 slots) + PINK palette (Minnie-style)
--------------------------*/
body[data-theme="cartoonfriends"]{
  /* Light-mode legibility */
  --text:#0F172A;
  --muted: rgba(15,23,42,.72);
  --line: rgba(15,23,42,.12);
  --card: rgba(255,255,255,.66);
  --card2: rgba(255,255,255,.78);
  --shadow: 0 18px 50px rgba(15,23,42,.18);
  --brand_bg: rgba(255,255,255,.70);
  --brand_border: rgba(15,23,42,.14);
  /* Pink palette (inspired by the reference image) */
  --t1-rgb: 255,79,163;     /* hot pink  #FF4FA3 */
  --t2-rgb: 255,180,219;    /* soft pink #FFB4DB */
  --t3-rgb: 255,240,247;    /* blush    #FFF0F7 */

  /* === 4 SVG slots (edit these paths OR replace the svg files) === */
  --icon-pattern: url("./assets/pattern.svg");
  --icon-portal:  url("./assets/portal.svg");
  --icon-overlay: url("./assets/overlay.svg");
  --icon-fx:      url("./assets/fx.svg");

  /* Background: pink field + soft highlights (keeps UI readable) */
  background:
    radial-gradient(900px 700px at 18% 12%, rgba(255,79,163,.28) 0%, transparent 62%),
    radial-gradient(900px 700px at 85% 20%, rgba(255,180,219,.24) 0%, transparent 58%),
    radial-gradient(800px 600px at 55% 86%, rgba(255,240,247,.55) 0%, transparent 55%),
    linear-gradient(180deg, #FF6FB3 0%, #FF86C2 55%, #FF6FB3 100%);
}

/* Slot #1 — Pattern (polka dots layer)
   Tip: make pattern.svg white dots on transparent for perfect Minnie look.
*/
body[data-theme="cartoonfriends"]::before{
  background-image: var(--icon-pattern);
  background-size: 180px 180px;
  background-repeat: repeat;

  /* Keep dots clean/white (overlay can tint them) */
  mix-blend-mode: normal;
  opacity: .85;

  animation: pattern-drift 12s linear infinite;
}

/* Slot #3 — Overlay layer (extra hearts/rings/etc) + gentle glow */
body[data-theme="cartoonfriends"]::after{
  background-image:
    var(--icon-overlay),
    radial-gradient(520px 280px at 30% 22%, rgba(255,240,247,.28), transparent 62%),
    radial-gradient(520px 280px at 70% 72%, rgba(255,180,219,.22), transparent 62%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 220px 220px, auto, auto;
  background-position: 0 0, 0 0, 0 0;

  /* Helps overlays feel “glossy” over pink */
  mix-blend-mode: screen;
  opacity: .85;
}

body[data-theme="cartoonfriends"] .stars{ opacity:.16; }
body[data-theme="cartoonfriends"] .leaves{ display:none; }

/* Brand sigil: candy pink */
body[data-theme="cartoonfriends"] .sigil{
  background:
    radial-gradient(18px 18px at 35% 35%, rgba(255,79,163,.90), transparent 62%),
    radial-gradient(18px 18px at 68% 60%, rgba(255,180,219,.85), transparent 62%),
    radial-gradient(12px 12px at 62% 35%, rgba(255,240,247,.80), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.10));
}

/* Slot #4 — FX layer (sparkles/sheens)
   You can fully control it via fx.svg.
*/
body[data-theme="cartoonfriends"] .bg::after{
  inset: 0;
  opacity: .85;

  background-image:
    var(--icon-fx),
    radial-gradient(6px 6px at 16% 24%, rgba(255,255,255,.28) 40%, transparent 42%),
    radial-gradient(7px 7px at 78% 18%, rgba(255,240,247,.22) 40%, transparent 42%),
    radial-gradient(6px 6px at 30% 78%, rgba(255,180,219,.22) 40%, transparent 42%),
    radial-gradient(7px 7px at 88% 70%, rgba(255,79,163,.18) 40%, transparent 42%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);

  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 220px 220px, auto, auto, auto, auto, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;

  filter: blur(.2px);
  animation: sparkle-sweep 5.2s ease-in-out infinite alternate;
}

/* Slot #2 — Portal sticker */
body[data-theme="cartoonfriends"] .portal::after{
  background-image: var(--icon-portal);
}
/* -------------------------
   Light-mode form contrast
   - Bold labels
   - White text inside fields
   Keeps dark mode untouched (this file loads only for light mode).
--------------------------*/
body[data-theme="cartoonfriends"] .field span,
body[data-theme="cartoonfriends"] .label,
body[data-theme="cartoonfriends"] .segTitle,
body[data-theme="cartoonfriends"] .check,
body[data-theme="cartoonfriends"] .msg,
body[data-theme="cartoonfriends"] .small,
body[data-theme="cartoonfriends"] .tiny{
  font-weight: 750;
  color: rgba(15,23,42,.78);
}

body[data-theme="cartoonfriends"] .card{
  background: rgba(255,255,255,.84);
  border-color: rgba(15,23,42,.14);
}

body[data-theme="cartoonfriends"] input,
body[data-theme="cartoonfriends"] textarea,
body[data-theme="cartoonfriends"] select{
  background: rgba(0,0,0,.32);
  border-color: rgba(0,0,0,.18);
  color: rgba(255,255,255,.96);
  font-weight: 750;
}

body[data-theme="cartoonfriends"] input::placeholder,
body[data-theme="cartoonfriends"] textarea::placeholder{
  color: rgba(255,255,255,.72);
}

body[data-theme="cartoonfriends"] .seg,
body[data-theme="cartoonfriends"] .meta,
body[data-theme="cartoonfriends"] .chip,
body[data-theme="cartoonfriends"] .progress{
  border-color: rgba(15,23,42,.14);
  background: rgba(255,255,255,.52);
}

body[data-theme="cartoonfriends"] .segBtn{
  background: rgba(0,0,0,.18);
  border-color: rgba(0,0,0,.18);
  color: rgba(255,255,255,.96);
  font-weight: 900;
}

/* =========================
   v2_20 PATCH — Better contrast on LIGHT mode
   Goal: keep the playful background + glass card, but make text/labels/fields readable.
========================= */
body[data-theme="cartoonfriends"]{
  --text: rgba(255,255,255,.96);
  --muted: rgba(255,255,255,.78);
  --line: rgba(255,255,255,.18);
  --shadow: 0 18px 55px rgba(0,0,0,.42);
  --brand_bg: rgba(0,0,0,.26);
  --brand_border: rgba(255,255,255,.16);
}

body[data-theme="cartoonfriends"] .card{
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.16));
  border-color: rgba(255,255,255,.16);
}

body[data-theme="cartoonfriends"] .h1,
body[data-theme="cartoonfriends"] .h2,
body[data-theme="cartoonfriends"] .p{
  display:inline-block;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.96);
  font-weight: 850;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

body[data-theme="cartoonfriends"] .p{
  /* keep paragraph spacing */
  margin: 0 0 12px;
}

body[data-theme="cartoonfriends"] .field span,
body[data-theme="cartoonfriends"] .segTitle,
body[data-theme="cartoonfriends"] .small{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

body[data-theme="cartoonfriends"] .field span{
  margin: 0 0 8px;
}

body[data-theme="cartoonfriends"] input,
body[data-theme="cartoonfriends"] textarea,
body[data-theme="cartoonfriends"] select{
  background: rgba(0,0,0,.30);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.96);
  font-weight: 750;
}

body[data-theme="cartoonfriends"] input::placeholder,
body[data-theme="cartoonfriends"] textarea::placeholder{
  color: rgba(255,255,255,.70);
}

body[data-theme="cartoonfriends"] .seg,
body[data-theme="cartoonfriends"] .meta,
body[data-theme="cartoonfriends"] .chip,
body[data-theme="cartoonfriends"] .progress{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.16);
}

body[data-theme="cartoonfriends"] .segBtn{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.96);
  font-weight: 900;
}

body[data-theme="cartoonfriends"] .segBtn.active{
  border-color: rgba(var(--t1-rgb), .55);
  background: linear-gradient(180deg, rgba(var(--t1-rgb), .30), rgba(255,255,255,.06));
}