/* ═══════════════════════════════════════════════════════════
   AGENCY TOOL – THEME: TAMAGOTCHI
   Eierschalenfarben, weich, verspielt. Inspiriert vom
   Tamagotchi-Ästhetik: runde Kanten, Pastellfarben, Herzen.
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Fredoka+One&display=swap');

[data-theme="tamagotchi"] {
  /* Hintergrund & Karten */
  --bg:           #FDF6ED;  /* Eierschale / Cremeweiß */
  --card:         #FFFFFF;
  --card2:        #FEF8F2;
  --border:       #F0DDED;  /* zartes Rosa */
  --border-light: #FAF0F5;

  /* Text */
  --text:         #3D2840;  /* warmes Dunkelviolett */
  --text-muted:   #9B85A0;
  --text-hint:    #D4C0D8;

  /* Akzentfarben – Pastell */
  --accent:        #5BBFA8;  /* Mint/Teal */
  --accent-bg:     #E8F8F4;
  --accent-border: #8DD8CA;

  --warn:          #E89A40;  /* weiches Orange */
  --warn-bg:       #FEF4E4;
  --warn-border:   #F5C980;

  --danger:        #E06080;  /* weiches Korallrosa */
  --danger-bg:     #FEF0F4;
  --danger-border: #F5A8BE;

  --purple:        #9B80D4;  /* weiches Lavendel */
  --purple-bg:     #F3EFFE;
  --purple-border: #C8B5EC;

  --neutral-bg:     #F5EFF8;
  --neutral-border: #DDD0E4;

  /* Form & Geometrie – alles sehr rund */
  --radius:    22px;
  --radius-sm: 16px;
  --radius-xs: 12px;
  --btn-radius: 50px;  /* Pill-Form */

  /* Schatten – weich und warm */
  --shadow:      0 6px 24px rgba(200, 120, 160, 0.10);
  --card-shadow: 0 3px 16px rgba(180, 100, 140, 0.08);
  --btn-shadow:  0 4px 16px rgba(224, 96, 128, 0.30);

  /* Schriften */
  --font-body:    'Nunito', 'Helvetica Neue', system-ui, sans-serif;
  --font-label:   'Nunito', system-ui, sans-serif;
  --font-display: 'Fredoka One', 'Nunito', system-ui, sans-serif;
}

/* ── Tamagotchi-spezifische Overrides ──────────────────────── */

/* Hintergrund-Muster: zarte Punkte */
[data-theme="tamagotchi"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, #E8D0E060 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
[data-theme="tamagotchi"] .app { position: relative; z-index: 1; }

/* Seitentitel: Fredoka One, warm */
[data-theme="tamagotchi"] .page-title {
  color: #C04878;
  font-size: 26px;
}

/* Eyebrow in Pastelton */
[data-theme="tamagotchi"] .eyebrow {
  color: #C8A0C0;
  letter-spacing: 0.1em;
}

/* Primärbutton: weiches Rosa-Gradient, Pill-Form */
[data-theme="tamagotchi"] .btn-primary:not(:disabled) {
  background: linear-gradient(135deg, #E06080 0%, #F09AB0 100%);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* Progress-Dots als Herzen */
[data-theme="tamagotchi"] .nav-dot {
  height: 4px;
  border-radius: 3px;
}
[data-theme="tamagotchi"] .nav-dot.active { background: #E06080; }
[data-theme="tamagotchi"] .nav-dot.done   { background: #5BBFA8; }

/* Summary Pills: zart rosa */
[data-theme="tamagotchi"] .sum-pill {
  border-color: var(--border);
  border-radius: 20px;
  background: #FEF0F5;
}

/* Onboarding-Nummer: rund, rosa */
[data-theme="tamagotchi"] .ob-num {
  background: linear-gradient(135deg, #E06080, #F09AB0);
  color: #fff;
  box-shadow: 0 3px 10px rgba(224,96,128,0.3);
}

[data-theme="tamagotchi"] .ob-title { color: #9B80D4; }

/* Checkboxen: minzgrün wenn ausgewählt */
[data-theme="tamagotchi"] .chk-box {
  border-radius: 8px;
}

/* Signal-Kacheln: extra rund, freundlich */
[data-theme="tamagotchi"] .sig-tile {
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
}

/* Zone-Badge mit weicherem Schatten */
[data-theme="tamagotchi"] .zone-badge {
  border-radius: 18px;
}

/* Szenario-Badge: Pill */
[data-theme="tamagotchi"] .scen-badge {
  border-radius: 20px;
}

/* Row-Dots: keine scharfen Kanten */
[data-theme="tamagotchi"] .row-dot {
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

/* Back-Button: freundlicher */
[data-theme="tamagotchi"] .btn-back {
  color: #C8A0C0;
  font-weight: 600;
}

/* Theme-Switcher-Button in Tamagotchi */
[data-theme="tamagotchi"] .theme-toggle {
  border-color: var(--border);
  box-shadow: var(--card-shadow);
}

/* Nav-Label */
[data-theme="tamagotchi"] .nav-label {
  color: #D4B0C8;
}

/* Detail-Toggle */
[data-theme="tamagotchi"] .detail-toggle {
  border-radius: 20px;
  font-weight: 600;
}